使用角度
使用角度
如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。
语法
background: linear-gradient(angle, color-stop1, color-stop2);
角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。
下面的实例演示了如何在线性渐变上使用角度:
示例
带有指定的角度的线性渐变:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文献测试专用</title>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left top, azure , violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, azure, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, azure, violet); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, azure , violet); /* 标准的语法(必须放在最后) */
}
#grad1 {
height: 100px;
background: -webkit-linear-gradient(0deg, azure, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(0deg, azure, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(0deg, azure, violet); /* Firefox 3.6 - 15 */
background: linear-gradient(0deg, azure, violet); /* 标准的语法(必须放在最后) */
}
#grad2 {
height: 100px;
background: -webkit-linear-gradient(90deg, azure, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(90deg, azure, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(90deg, azure, violet); /* Firefox 3.6 - 15 */
background: linear-gradient(90deg, azure, violet); /* 标准的语法(必须放在最后) */
}
#grad3 {
height: 100px;
background: -webkit-linear-gradient(180deg, azure, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, azure, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, azure, violet); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, azure, violet); /* 标准的语法(必须放在最后) */
}
#grad4 {
height: 100px;
background: -webkit-linear-gradient(-90deg, azure, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(-90deg, azure, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(-90deg, azure, violet); /* Firefox 3.6 - 15 */
background: linear-gradient(-90deg, azure, violet); /* 标准的语法(必须放在最后) */
}
</style>
</head>
<body>
<h3>线性渐变 - 使用不同的角度</h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
</body>
</html>
运行效果如下:
使用多个颜色结点
下面的实例演示了如何设置多个颜色结点:
示例
带有多个颜色结点的从上到下的线性渐变:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文献测试专用</title>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(orange, azure, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(orange, azure, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(orange, azure, violet); /* Firefox 3.6 - 15 */
background: linear-gradient(orange, azure, violet); /* 标准的语法(必须放在最后) */
}
#grad2 {
height: 200px;
background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */
}
#grad3 {
height: 200px;
background: -webkit-linear-gradient(orange 10%, azure 85%, violet 90%); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(orange 10%, azure 85%, violet 90%); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(orange 10%, azure 85%, violet 90%); /* Firefox 3.6 - 15 */
background: linear-gradient(orange 10%, azure 85%, violet 90%); /* 标准的语法(必须放在最后) */
}
</style>
</head>
<body>
<h3>3 个颜色结点(均匀分布)</h3>
<div id="grad1"></div>
<h3>7 个颜色结点(均匀分布)</h3>
<div id="grad2"></div>
<h3>3 个颜色结点(不均匀分布)</h3>
<div id="grad3"></div>
</body>
</html>
运行效果如下: