×

CSS3里的linear-gradient()函数

作者:andy0012020.05.09来源:Web前端之家浏览:10262评论:0

linear-gradient() 函数用于创建一个线性渐变的 "图像"。

为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。

语法:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
描述
direction用角度值指定渐变的方向(或角度)。
color-stop1, color-stop2,...用于指定渐变的起止颜色。

DEMO:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS3里的linear-gradient()函数</title> 
<style>
#grad1 {
    height: 200px;
    background-color: red; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色,慢慢过渡到黄色:</p>
<div id="grad1"></div>
<p><strong>注意:</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>
</body>
</html>

预览看下吧。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/html8jsd80923840983908.html

网友评论文明上网理性发言 已有0人参与

发表评论: