Rumah > Artikel > hujung hadapan web > CSS3如何实现线性渐变效果

CSS3如何实现线性渐变效果

藏色散人asal: 2018-11-28 11:17:026552semak imbas

CSS3实现线性渐变效果的方法：首先创建一个HTML示例文件；然后在body中创建一个div；最后通过“linear-gradient”属性实现线性渐变效果即可。

CSS3如何实现线性渐变效果

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

CSS3是CSS（层叠样式表）技术的升级版本。我们可以通过css3属性实现更多炫酷的页面效果，丰富网站内容，比如背景颜色呈线性渐变的效果！

下面我们就给大家介绍一个常见的css3渐变效果。

首先大家要知道，CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。

本节先重点介绍线性渐变-Linear Gradients。

代码示例如下：

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>CSS3创建线性渐变示例</title>
    <style type="text/css">
        .container{
            text-align:center;
            padding:20px 0;
            width:960px;
            margin: 0 auto;
        }

        .container div{
            width:200px;
            height:150px;
            display:inline-block;
            margin:2px;
            color:#ec8007;
            vertical-align: top;
            line-height: 230px;
            font-size: 20px;
        }

        .linear{
            background:linear-gradient(to bottom, #4b6c9c , #5ac4ed);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="linear">Linear线性渐变</div>
</div>
</body>
</html>

效果如下图：

linear线性渐变

上图所示，就是由颜色#4b6c9c到#5ac4ed进行过渡的线性渐变。

或者设置颜色从#9492ff到#ccccff过渡，效果如下：

线性渐变示例

css3中的linear-gradient属性就是表示用线性渐变创建图像。

默认情况下，linear-gradient线性渐变是从上到下开始过渡的。

当然渐变的方向也可以是，向下/向上/向左/向右/对角方向，以及定义一个角度（angle）。

其语法是：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

第一个参数表示线性渐变的方向，第二个参数表示开始过渡的颜色即起点颜色，第三个参数表示过渡到的颜色。

注：Internet Explorer 9 及之前的版本不支持渐变。

本篇文章就是关于css3实现线性渐变效果的方法介绍，非常简单易懂，希望对需要的朋友有所帮助！

Atas ialah kandungan terperinci CSS3如何实现线性渐变效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：如何使用CSS实现背景图像透明Artikel seterusnya：CSS中transition属性不起作用的原因及解决方法

Artikel berkaitan

Lihat lagi