css3渐变，CSS3中如何实现渐变效果
其实css3渐变的问题并不复杂，但是又很多的朋友都不太了解CSS3中如何实现渐变效果，因此呢，今天小编就来为大家分享css3渐变的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
如何用css使边框颜色渐变
background-color:#a0a#909#808#707#606#505#404#303;
background-color属性的参数很简单，可以是任意合法的颜色值或颜色值列表，当background-color只设置了一个颜色时，那么就是单色的。如果设置了n中颜色而边框宽度也为n的话那么每一个像素显示一种颜色，如果边框宽度值大于颜色数值时，最后一种颜色用于显示剩下的宽度。
怎样用css写线条左右渐变
很多时候在开发网页的时候，可能因为一些原因需要为边框设置颜色渐变，那么该如何设置颜色边框渐变？本篇文章将为大家介绍使用css3设置边框颜色渐变的方法。
我们设置边框颜色渐变时可以用到css3中的属性是border-image或者border-colorcss3边框颜色渐变，那么两个属性如何设置边框颜色渐变。
我们首先来看border-image属性实现的简单css3边框颜色渐变的例子：
第一种：border-image设置边框颜色渐变示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
border:10px solid#ddd;
border-image:-webkit-linear-gradient(#F80,#2ED) 20 20;
border-image:-moz-linear-gradient(#F80,#2ED) 20 20;
border-image:-o-linear-gradient(#F80,#2ED) 20 20;
border-image: linear-gradient(#F80,#2ED) 20 20;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css3边框颜色渐变效果如下：
说明：上述代码中你会发现给border-image加了linear-gradient，这是为什么呢？因为若是你不加linear-gradient就不会有线性渐变的效果。（关于border-image有很多的用法，你可以参考css手册。）
CSS3中如何实现渐变效果
要得上面的线性渐变效果，我们这样去定义CSS3样式： background-image:-moz-linear-gradient(top,#8fa1ff,#3757fa);/* Firefox*/ background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0,#ff4f02), color-stop(1,#8f2c00));/* Saf4+, Chrome*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0');/* IE*/-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。 IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。线性渐变使用from()以及to()方法指定过渡颜色点: background:-webkit-gradient(linear, left top, left bottom, from(#96ff00), color-stop(0.5, orange), to(rgb(255, 0, 0)));线性渐变多个过渡点在同一位置： background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5,#fff), color-stop(0.5,#66cc00));径向渐变综合效果演示：
CSS3下的渐变文字效果实现
一、方法一：借助mask-image属性
如果您手头上的浏览器是Chrome或是Safari，则您可以在demo页面中看到类似下面的效果：
相应的HTML代码如下：
[code]h2 class="text-gradient" data-text="天赐美妞"天赐美妞/h2[/code][button value="复制代码"]与HTML相对应的CSS代码如下：
[code].text-gradient{
display: inline-block;
font-family:微软雅黑;
font-size: 10em;
position: relative;
}
.text-gradient[data-text]::after{
content: attr(data-text);
color: green;
position: absolute;
left: 0;
z-index: 2;
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
}
[/code][button value="复制代码"]
从CSS代码可以看出，效果的实现除了“content内容生成技术”以外，主要是使用了mask-image属性，内容则是“webkit核心浏览器下的渐变”了。
二、方法二：background-clip+ text-fill-color下的实现
您可以狠狠地点击这里：CSS3下的渐变文字效果方法二demo
如果您手头上的浏览器是Chrome或是Safari，则您可以在demo页面中看到类似下面的效果：
此处实现相对上面要简单些，HTML代码如下：
[code]h2 class="text-gradient"天赐美妞/h2[/code][button value="复制代码"]
与HTML相对应的CSS代码如下：
[code].text-gradient{
display: inline-block;
color: green;
font-size: 10em;
font-family:微软雅黑;
background-image:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}; [/code][button value="复制代码"]
CSS代码中关键有用的其实就是最后三行：
[code]background-image:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;[/code][button value="复制代码"]
此方法虽然使用的CSS属性相对多些，但是结构简单，易于控制，颜色的选取与控制也更精确，理解上也更容易理解。我个人是推荐使用方法二的。
三、结语由于目前text-fill-color与mask-image属性貌似就webkit核心的浏览器支持，所以两个demo页面只能在Chrome浏览器或是Safari浏览器下才能看到渐变效果。Firefox浏览器下纯色，IE下就更不用说了。
但是，文字渐变本身就是装饰性的功能，所以，本着渐进增强的原则，我们在实际项目中其实是可以大胆使用的。在不影响原来功能基础上，几行CSS代码，让占有率愈来愈高的Chrome浏览器下有更好的视觉体验效果，何乐而不为呢？
关于css3渐变和CSS3中如何实现渐变效果的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。