码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-04-19 13:23:00      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:著作权   数据   imm   opera   direction   die   种类型   渐变   色值   

来源

 

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

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

标签:著作权   数据   imm   opera   direction   die   种类型   渐变   色值   

原文地址:https://www.cnblogs.com/chengfengchi/p/10735275.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!