渐变

颜色 ( Color )

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;

渐变、颜色、不透明度、透明颜色

渐变