W3C标准线性渐变属性参数
W3C标准线性渐性语法包括三个主要属性参数:第一个参数指定了渐变的方向,同时决定了渐变颜色的停止位置。第一个参数值可以省略,当省略不写的时候其取值为“to bottom”表示颜色从上到下渐变。在决定渐变的方向主要有两种方法:
1、<angle>:通过角度来确定渐变的方向,单位deg。
0deg表示渐变方向从下往上,90deg表示渐变方向从左往右
(xx deg表示以y轴下半轴为渐变方向起始点,原点为固定点,旋转xx度,再以原点为渐变终点方向,生成渐变。如果取值为正值,其角度按顺时针方向旋转,若为负值,则为逆时针旋转。)
2、关键词:
to top:0deg
to right:90deg/-270deg
to bottom:180deg/-180deg
to left:270deg/-90deg
除了使用上面4个关键词之外,还可以使用“top left”左上角到右下角、“top right”左上角到右下角等。
deg理解示意图:
第二个和第三个参数,表示颜色的起始点和结束点。大家可以在从中插入更多的颜色值。
linear-gradient 第2个及之后的参数值为颜色值或颜色值+百分比%组合(百分比指该颜色占元素渐变色的区域比例),可加任意多个,每个之间加逗号“,”分隔,如:lg(#000 50%,#f00 50%);颜色占百分比写法新旧版都支持!
注意:
新版的chrome/firefox 已支持W3C标准线性渐变属性参数写法,推荐css书写顺序:-webkit-linear-gradient();-moz-linear-gradient();linear-gradient();把w3c标准写法放在最后,保证chrome/firfox支持最新写法时,会只认linear-gradient();的相关定义!
linear-gradien第一个参数指定了渐变的方向,新旧版写法是不一样的。如:颜色从顶部#fff向底部#000渐变(Top to Bottom)
旧版:background-image:-webkit-linear-gradient(top,#fff,#000);(top表示从渐变开始点为top,向bottom渐变)
新版:background-image:linear-gradient(to bottom,#fff,#000);(to bottom表示渐变方向为top->bottom,明显新版更易理解)
需要注意的是:background-image:-webkit-linear-gradient(to bottom,#fff,#000);这类带前缀+新版写法(to bottom)并不会被chrome解析,调试工具可以看到直接应用的是background-image:linear-gradient(to bottom,#fff,#000)
Emmet的缩写示范:
上面的例子从上到下#fff 到 #000 渐变,写法 :
lg(#fff,#000) 【 lg(to bottom,#fff,#000)的简写 】
或 lg(180deg,#fff,#000)
- emmet对负值的角度写法有误,如:lg(-90deg,#f00,#333) 跟 lg(90deg,#f00,#333) 扩展出来的css是一样的,明显错的
所以,对负值的角度可转换成对应的正值的角度,如上面的可改写成lg(270deg,#f00,#333) - 非常规的角度(除45deg、90deg、180deg、270deg、360deg),emmet扩展出来的css,只有不带浏览器前缀的新版写法才是正确的
- 常规的正值角度写法,如:45deg,emmet会自动转换成to top right(新版写法)/bottom left(带前缀的旧版写法)
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}