css奇技淫巧-色彩渐变与动态渐变

来源

 

css渐变

CSS 中设置的渐变是 gradient 数据类型，它是一种特别的image数据类型。使用background-image设置，可叠加设置多个；

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

线性渐变 linear-gradient()

渐变的实现由两部分组成：渐变线和色标。渐变线用来控制发生渐变的方向；色标包含一个颜色值和一个位置，用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变，通过确定多个色标可以制作多色渐变效果。 使用渐变色做背景已经很常见了：

background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);
复制代码

方向（direction）

从上到下（默认情况下）

.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
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。