linear-gradient(lineargradient 角度)

backgroundlinear-gradient的属性值怎么写

在CSS中background: -moz-linear-gradient 让网站背景渐变的属性，目前火狐3.6以上版本和google浏览器支持这个属性。

background: -moz-linear-gradient(top, #bccfe3 0%, #d2dded 100%); 适合 FF3.6+

background: -webkit- gradient(linear, left top, left bottom, color-stop(0%,#bccfe3), color- stop(100%,#d2dded)); 适合 Chrome,Safari4+

background: -webkit-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合Chrome10+,Safari5.1+

background: -o-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合Opera 11.10+

background: -ms-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合IE10+

background: linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合W3C

背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡。这反过来又减少了下载时间和带宽的使用，放大时也比较好看，可以让您创造出一个更灵活的布局。

Firefox支持两种类型的CSS渐变：线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。

css使用线性渐变属性没有用是怎么回事

首先，blue和red之间要加个逗号，即

background:-moz-linear-gradient(top,blue,red);

其次，由于用了moz前缀，所以只有运行于火狐浏览器才有效。

如果想运行于webkit内核的浏览器（比如Chrome、Safari），则改为

background:-webkit-linear-gradient(top,blue,red);

至于IE（指低版本的），由于不支持css3，就只能用它本身的滤镜了。

CSS3设置border某一边的颜色渐变

如图所示，渐变的边框是一个 li 标签，要给他的 border-bottom 设置颜色渐变。

background-image 中的第一个 linear-gradient 是设置 li 标签的背景色的，

第二个 linear-gradient 配合 border-image 即可设置 border 的渐变色。

-webkit-linear-gradient和-webkit-gradient有什么区别

个人理解。

-webkit-gradient(linear

第一个参数为linear 时， 和-webkit-linear-gradient没区别。

这里属于重复调用。删除任意一个不影响。

html中如何让背景颜色渐变？？？

1、打开html开发工具，新建一个html文件在html代码页面创建一个div并给这个标签添加一个类名linear：

2、然后为类设置样式。在title后面创建一个style标签，然后在这个标签里面设置linear类的高、渐变（linear-gradient）的样式，这里的第一个参数是设置渐变的方向，后面两个参数是起始颜色和终止颜色。设置好后去浏览器查看效果：

3、保存好html文件后使用浏览器查看效果。就会看到一个绿色到红色的渐变了。以上就是html中让背景颜色渐变的设置方法介绍：

css篇-mask-image + linear-gradient 优雅显示富文本过长

明人不说暗话，直接上例子

由于富文本属于长文本，在页面上我们会有这种超出隐藏的功能需求，

如果是纯文本的话，我们大可以用slice截取字符串的方式来先显示几个字的方式，

但是由于富文本是由不同的html标签组成，这样的我们就会显得棘手。

如果我们不用蒙版遮罩的方式，就会变成这样

不做处理的话，就觉得比较生硬，所以用上了mask-image + linear-gradient 就会显得比较优雅。

这里只是用了mask-image的一些属性，当然mask-image能够做的不止这些，具体有兴趣的可以去摸索看看咯。