探索css中渐变属性gradient的超炫酷玩法（3)

最新推荐文章于 2023-04-17 18:13:53 发布

㼛思雨

最新推荐文章于 2023-04-17 18:13:53 发布

阅读量275

点赞数

分类专栏： HTML5和CSS3进阶文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_45147894/article/details/108835039

版权

本文详细介绍了CSS3中的线性渐变，包括不同方向、角度和透明度的应用，以及如何创建重复线性渐变。此外，还探讨了圆锥渐变这一有趣的属性，以及对旧版IE浏览器的渐变兼容性解决方案。

摘要由CSDN通过智能技术生成

渐变分为线性渐变和径向渐变，所谓渐变也就是几种颜色之间的平稳过渡。

线性渐变（linear-gradient）

实现线性渐变，你至少需要定义两种颜色的结点，这两种结点就是你想平稳过渡的颜色，即：其中一种颜色结点为起点，另一种颜色结点为结束点。

书写：

background: linear-gradient(color1,color2);

color1为起点结点，color2为结束点结点。

同时也可以定义渐变的方向，是从上到下渐变，还是从左至右渐变，或者从右至左渐变，默认情况下是从上至下渐变的。

书写：

background: linear-gradient(direction,colro1,color2);

direction表示渐变的方向，此值直接写方向的起点即可，如：渐变方向为从左至右，直接写left即可，渐变方向为从下至上，直接写bottom即可。

当然也可以对角渐变，如：从左上角到右下角，书写为background: linear-gradient(left top,color1,color2);

默认渐变方向为从上往下渐变:

代码如下：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <title>渐变(gradients)属性</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            margin: 100px auto;
            background: -webkit-linear-gradient(rgb(4, 252, 78), red);
            background: -o-linear-gradient(rgb(4, 252, 78), red);
            background: -moz-linear-gradient(rgb(4, 252, 78), red);
            background: -mos-linear-gradient(rgb(4, 252, 78), red);
            background: linear-gradient(rgb(4, 252, 78), red);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下；

我们定义渐变方向为从右到左：

代码如下：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <title>渐变(gradients)属性</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            margin: 100px auto;
            background: -webkit-linear-gradient(right,rgb(4, 252, 78), red);
            background: -o-linear-gradient(right,rgb(4, 252, 78), red);
            background: -moz-linear-gradient(right,rgb(4, 252, 78), red);
            background: -mos-linear-gradient(right,rgb(4, 252, 78), red);
            background: linear-gradient(right,rgb(4, 252, 78), red);
            
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

最低0.47元/天解锁文章

㼛思雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
探索css中渐变属性gradient的超炫酷玩法（3)

linear-gradient 语法background: linear-gradient(direction, color-stop1, color-stop2, …);background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));background: repeating-linear-gradient(red, yellow 10%, green 20%);background: linear-gr...
复制链接

扫一扫

专栏目录