渐变
linear-gradient线性渐变
linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+)
where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?
C
点渐变容器中心点,A
是通过C
点垂直线与通过C
点渐变线的夹角,这个角称为渐变角度。
可以通过下面两种方法来定义这个角度:
- 使用关键词:
to top
、to bottom
、to left
、to right
、to top right
、to top left
、to bottom right
和to bottom left
- 使用带单位数字定义角度,比如
45deg
、1turn
等
如果省略角度值的设置,那默认是to bottom
(对应180deg
或者.5turn
):
background-image: linear-gradient(white, red);
另一个是使用顶角关键词重要的一点是它依赖于渐变容器的尺寸,比如to top right
(或者其它顶角关键词)。
如果你想要一个red
至blue
的渐变,方向是至元素的top right
。逻辑上,blue
应该在元素的右上角,以及中间的紫色渐变周围应该形成一条直线,从左上角至右下角穿过。如下图所示:
background-image: linear-gradient(to top right, red, blue);
如果你想让你的浏览器工作更多,为什么不能按顺序指定颜色在渐变线上的位置呢?事实上,颜色点位置是按照你预计的指令操作,并不会阻止你不按其位置顺序来操作。但如果后面的值比前面的值更小时,浏览器会自动做相应的纠正处理。比如:
background-image: linear-gradient(80deg, red 30%, orange 10%, yellow 60%, blue 40%);
让我们从第一个颜色red
开始,其定位在渐变线的30%
位置处,第二个颜色orange
在10%
位置,但这是错误的,正如上面所说的,颜色的停止点是一个增量。这个时候,浏览器将会纠正第二个颜色的位置,它将会和前一个颜色的位置一样,也分布在渐变线的30%
位置。然后第三个颜色yellow
分布在渐变线的60%
位置处,但紧随其后的第四个颜色blue
为40%
,浏览器同样会纠正并设置其位置与前一个颜色位置相同。
background-image: linear-gradient(80deg, red 30%, orange, blue 10%);
最后一点,在上面这个例子中,最后一个颜色blue
是不正确的位置,因此浏览器将会纠正它的位置与之前的位置相同,在这种情况之下并不是与其相邻的颜色yellow
,也不会是orange
,它会追溯到第一个颜色red
位置处。因此,red
和blue
都分布在渐变线的30%
处,因此其中yellow
和orange
两颜色都将不可见。
repeating-linear-gradient重复线性渐变
CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的图像, 这是一个类似 linear-gradient
的函数,并且采用相同的参数,但是它会在所有方向上重复渐变以覆盖其整个容器。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
display: block;
width: 50%;
height: 80px;
border-color: #000000;
padding: 10px;
}
#grad1 {
background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
}
#grad2 {
background-color: black;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
}
</style>
</head>
<body>
<ol>
<li>repeating gradient
<div id="grad1"></div>
</li>
<li>Zebra pattern
<div id="grad2"></div>
</li>
</ol>
</body>
</html>
radial-gradient 径向渐变
radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] ||<extent-keyword> ] [ at <position> ]? ,
| at <position> , <color-stop> [ , <color-stop> ]+)
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
<color-stop> = <color> [ <percentage> | <length> ]?
CSS3的径向渐变相对于线性渐变要复杂的多,属性参数也繁多复杂。CSS3径向变语法中的属性参数定义如下:
<position>
:主要用来定义径向渐变的圆心位置。此值类似于CSS中background-position
属性,用于确定元素渐变的中心位置。如果这个参数省略了,其默认值为“center”。其值主要有以下几种:
<length>
:用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。<percentage>
:用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。left
:设置左边为径向渐变圆心的横坐标值。center
:设置中间为径向渐变圆心的横坐标值或纵坐标。right
:设置右边为径向渐变圆心的横坐标值。top
:设置顶部为径向渐变圆心的纵标值。bottom
:设置底部为径向渐变圆心的纵标值。
<shape>
:主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”:
circle
:如果<size>
和<length>
大小相等,那么径向渐变是一个圆形,也就是用来指定圆形的径向渐变ellipse
:如果<size>
和<length>
大小不相等,那么径向渐变是一个椭圆形,也就是用来指定椭圆形的径向渐变。
<size>
:主要用来确定径向渐变的结束形状大小。如果省略了,其默认值为“farthest-corner”。可以给其显式的设置一些关键词,主要有:
closest-side
:指定径向渐变的半径长度为从圆心到离圆心最近的边;closest-corner
:指定径向渐变的半径长度为从圆心到离圆心最近的角;farthest-side
:指定径向渐变的半径长度为从圆心到离圆心最远的边;farthest-corner
:指定径向渐变的半径长度为从圆心到离圆心最远的角;
如果<shape>
设置了为“circle”或者省略,<size>
可能显式设置为<length>
。表示的是用长度值指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆。此值不不能负值。
如果<shape>
设置了“ellipse”或者省略,<size>
可能显式设置为[<length>|<percentage>]
。主要用来设置椭圆的大小。第一个值代表椭圆的水平半径,第二个值代表垂直半径。这两个值除了使用<length>
定义大小之外还可以使用<percentage>
来定义这两半径大小。使用<percentage>
定义值是相对于径向渐变容器的尺寸。同样不能为负值。
<color-stop>
:径向渐变线上的停止颜色,类似于线性渐变的<color-stop>
。径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点,100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。
虽然径向渐变要比线性渐变更为复杂,只要了解了其基本语法以及相关属性参数的作用,我想并不会需要花太多的时间去适应。接下来,我们通过实战来加强径向渐变的使用。下面的所有例子我们都在一个宽度为400像素,高为300像素的容器中实现。
先来看一个最简单的径向渐变,圆心都是容器正中间,从“hsla(120,70%,60%,.9)”颜色向“hsla(360,60%,60%,.9)”颜色实现径向渐变:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(rgb(220, 75, 200),rgb(0, 0, 75));
}
如果你想制作一个圆形渐变,而不是一个椭圆形渐变,只需要添加一个关键词“circle”,我们在前例的基础上添加一个关键词“circle”:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(circle,rgb(220, 75, 200),rgb(0, 0, 75));
}
圆形的渐变是一个特殊的椭圆渐变,水平半径和垂直半径具有相同的长度值。
既然圆形渐变是椭圆渐变的一种特殊情况,如果我们渐变主要半径(水平半径)和次要半径(垂直半径)不相同时就是一个椭圆形渐变。
正如上面所言,主要半径和次要半径不相等时,制作的径向渐变是椭圆形渐变,在制作椭圆形渐变,可以使用关键词“ellipse”:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(ellipse,rgb(220, 75, 200),rgb(0, 0, 75));
}
除了使用关键词制作不同的径向渐变,还可以用不同的渐变参数制作径向渐变效果,通过制作同心圆,主要半径和次要半径来决定径向渐变的形状。例如,圆心位置都在“200px,150px”处,主要半径为50px,次要半径为150px,从“rgb(220, 75, 200)”色到“rgb(0, 0, 75)”色径向渐变:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(50px 150px at 200px 150px,rgb(220, 75, 200),rgb(0, 0, 75));
}
接着我们来看看圆心相同,内外半径大小相同实现的渐变效果:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(200px 200px at 200px 150px,rgb(220, 75, 200),rgb(0, 0, 75));
}
下面的实例中,我们将圆心定义在“at 50% 75%”的位置,分别演示了“closest-side”、“closest-corner”、“farthest-side”和“farthest-corner”分别在圆形与椭圆形径向渐变的效果。
/* closest-side*/
.closest-side .circle {
background-image: radial-gradient(closest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.closest-side .ellipse {
background-image: radial-gradient(closest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* closest-corner*/
.closest-corner .circle {
background-image: radial-gradient(closest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.closest-corner .ellipse {
background-image: radial-gradient(closest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* farthest-side */
.farthest-side .circle {
background-image: radial-gradient(farthest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.farthest-side .ellipse {
background-image: radial-gradient(farthest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* farthest-corner */
.farthest-corner .circle {
background-image: radial-gradient(farthest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.farthest-corner .ellipse {
background-image: radial-gradient(farthest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
repeating-radial-gradient 重复径向渐变
CSS函数repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的图形 。它类似于radial-gradient
并且采用相同的参数,但是它会在所有方向上重复颜色,以覆盖其整个容器。
div {
width: 400px;
height: 300px;
margin: 20px auto;
background-image: repeating-radial-gradient(red,green 40px, orange 80px);
}
conic-gradient 圆锥渐变
{
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(red, orange, yellow, green, teal, blue, purple);
}
{
width: 200px;
height: 200px;
background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);
border: 1px solid #000;
}
颜色 ( Color )
color
属性描述: 设置或获取对象的文本颜色
版本变更: 否
语法模板:
color:<color>
默认值: 由user agent
决定
属性值描述:
<color>:指定颜色;
适用元素: 所有元素
是否具有继承性: 是
是否具有动画性: 是
脚本接口: color
注意事项:
- 可以使用
Color Name
(颜色名称),HEX
,RGB
,RGBA
,HSL
,HSLA
,transparent
来指定color
- 用颜色名称指定
color
可能不被一些浏览器接受
opacity@3
属性描述: 设置或获取对象的不透明度
语法模板:
opacity:<number>
默认值:
属性值描述:
<number>:使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内,如果超过了这个范围,其计算结果将截取到与之最相近的值;
适用元素: 所有元素
是否具有继承性: 否
是否具有动画性: 是
脚本接口: opacity
注意事项: 元素定义了值小于1
的opacity
,将会产生局部层叠上下文
透明颜色
background: transparent;