标签:著作权 数据 imm opera direction die 种类型 渐变 色值
CSS 中设置的渐变是 gradient 数据类型,它是一种特别的image数据类型。使用background-image
设置,可叠加设置多个;
CSS3 定义了两种类型的渐变(gradients):
渐变的实现由两部分组成:渐变线和色标。渐变线用来控制发生渐变的方向;色标包含一个颜色值和一个位置,用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个,以创建平滑的渐变,通过确定多个色标可以制作多色渐变效果。 使用渐变色做背景已经很常见了:
background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);
复制代码
.foo {
width: 100px;
height: 100px;
background: linear-gradient(green, yellow);
}
复制代码
从右到左同理。 兼容性原因,不同浏览器写法不同:
.foo {
background: linear-gradient(to right, green, yellow); /* 标准的语法 */
background: -webkit-linear-gradient(left, green, yellow); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, green, yellow); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, green, yellow); /* Firefox 3.6 - 15 */
}
复制代码
.foo {
background: linear-gradient(to bottom right, green, yellow); /* 标准的语法 */
background: -webkit-linear-gradient(left top, green, yellow); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, green, yellow); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, green, yellow); /* Firefox 3.6 - 15 */
}
作者:Simmzl
链接:https://juejin.im/post/5cb941caf265da03a743eed2
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
标签:著作权 数据 imm opera direction die 种类型 渐变 色值
原文地址:https://www.cnblogs.com/chengfengchi/p/10735275.html