CSS3线性渐变linear-gradient的angle角度参数值

| 分类 Web  | 标签 Programming  Web  CSS 

CSS线性渐变属性linear-gradient的语法格式如下:

linear-gradient(
    [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

参考:MDN linear-gradient()

当用angle参数来指定渐变方向时,正数值表示按顺时针方向的偏移角度,而负数值是按逆时针方向的偏移角度值。45度是时针指向1:30时的方向,90度是时针指向3:00时的方向,315度是时针指向10:30时的方向,0度/360度是时针指向12:00时的方向。因此,angle值为-45度和315度时所表示的激变方向指向是相同的。

当angle为0时,从红到绿的渐变效果如下(使用支持css3的最新版本的浏览器来看以下效果,如chrome):

linear-gradient: 0deg

代码如下:

1
2
3
4
5
6
div.gradient {
    padding: 0em;
    background: linear-gradient(0deg, red, green);
    height: 15em;
    width: 15em;
}
<div class="gradient">
   linear-gradient: 0deg 
</div>

以下是angle取各值时对应的效果:

background:linear-gradient(0deg, red, green);
background:linear-gradient(360deg, red, green);
background:linear-gradient(45deg, red, green);
background:linear-gradient(-315deg, red, green);
background:linear-gradient(90deg, red, green);
background:linear-gradient(-270deg, red, green);
background:linear-gradient(135deg, red, green);
background:linear-gradient(-225deg, red, green);
background:linear-gradient(180deg, red, green);
background:linear-gradient(-180deg, red, green);
background:linear-gradient(225deg, red, green);
background:linear-gradient(-135, red, green);
background:linear-gradient(270deg, red, green);
background:linear-gradient(-90deg, red, green);
background:linear-gradient(315deg, red, green);
background:linear-gradient(-45deg, red, green);

上一篇     下一篇