CSS3 渐变（Gradients）之CSS3 线性渐变

发布时间：2020-03-14 11:02:00 所属栏目：系统来源：站长网

导读：这篇文章主要为大家详细介绍了CSS3 渐变（Gradients）之CSS3 线性渐变的相关资料，了解学习CSS3 线性渐变，感兴趣的小伙伴们可以参考一下

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>

</html>

CSS3 渐变（Gradients）之CSS3 线性渐变

（3）、线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

width:500px;

height: 200px;

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */

}

</style>

</head>

<body>

<p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>

</html>

CSS3 渐变（Gradients）之CSS3 线性渐变

（4）、使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

CSS3 渐变（Gradients）之CSS3 线性渐变

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

width:300px;

height: 50px;

background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(0deg, red, blue); /* 标准的语法（必须放在最后） */

}

#grad2 {

width:300px;

height: 50px;

background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(90deg, red, blue); /* 标准的语法（必须放在最后） */

}

#grad3 {

width:300px;

height: 50px;

background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(180deg, red, blue); /* 标准的语法（必须放在最后） */

}

#grad4 {

width:300px;

height: 50px;

background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(-90deg, red, blue); /* 标准的语法（必须放在最后） */

}

</style>

</head>

<body>

<h3>线性渐变 - 使用不同的角度</h3>

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2/6

首页

尾页