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

作者：佚名字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含gradients,web gradients,ingradients,ui gradients,linear gradients等相关知识,佚名希望在学习及工作中可以帮助到您

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

-----线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

-----径向渐变（Radial Gradients）- 由它们的中心定义

CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

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

（1）、线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

</div>

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>

</div> </div>

（2）、线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

</div>

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p> &n

您可能想查找下面的文章:

2017-06-02深入理解css中vertical-align属性
2017-06-02利用CSS3的border-radius绘制太极及爱心图案示例
2017-06-02CSS3 仿微信聊天小气泡实例代码
2017-06-02分享CSS3中必须要知道的10个顶级命令
2017-06-02CSS3新属性transition-property transform box-shadow实例学习
2017-06-02IE下实现类似CSS3 text-shadow文字阴影的几种方法
2017-06-02CSS3弹性盒模型开发笔记（一）
2017-06-02css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2017-06-02纯css3(无图片/js)制作的几个社交媒体网站的图标
2017-06-02一款简洁的纯css3代码实现的动画导航

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

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容