CSS函数（一）

linear-gradient | radial-gradient | background-clip

①linear-gradient() 函数：用于创建一个表示两种或两种以上颜色线性渐变的图片。

background-image: linear-gradient([<angle> | to <side-or-corner> ,] ? <color-stop-list>)

参数说明：

• angle = [ deg | rad | turn | grad ]：指定渐变的方向（或角度）。
  使用方向指定渐变时：线性渐变由单词to和最多两个关键字组成，如to left，to right top等，默认时为to bottom。
  使用角度指定渐变时：CSS中，有 4 种表示角度的单位：度（deg）、弧度（rad）、圈（turn）、梯度（grad），角度允许为负值。
  四种表达方式的关系为：90deg=1.57rad=0.25turn=100grad

方向和角度之间的关系：
to left：设置渐变为从右到左,相当于270deg。
to right：设置渐变从左到右。相当于90deg。
to top：设置渐变从下到上。相当于0deg。
to bottom：设置渐变从上到下。相当于180deg，这是默认值。

• side-or-corner = [ left | right | top | bottom | left top | left bottom | right top | right bottom]
• color-stop = [ length | percentage ]
  其中，length：用长度值指定起止色位置，不允许负值。percentage：用百分比指定起止色位置。

test 1

.test1{ background-image: linear-gradient(to right bottom, lightpink,lightblue); }
浅粉到浅蓝色的渐变，渐变方向为从左到右下角。

test 2

.test2{ background-image: linear-gradient(215deg, lightpink,lightblue); }
浅粉到浅蓝色的渐变，渐变角度为顺时针215°。

test 3 Color stop

.test3{ background-image: linear-gradient(to top, lightpink,lightblue 25%,lightyellow); }
从底部到顶部的渐变，从浅粉开始，以其长度的25％变为浅蓝，最后变为浅黄。

test 4 Color hint

.test4{ background-image: linear-gradient(0.25turn, lightpink,75%,lightblue); }
从左到右的线型渐变，从浅粉开始，在渐变长度的75％处到达中点颜色，其余25％的长度变为浅蓝。

test 5 Multi-position color stop

.test5{ background-image: linear-gradient(150grad, lightpink 0 40%,lightblue 40% 100%); }
梯度为150的线性渐变，前40%为浅粉，后60%为浅蓝，其中一条硬斜线表示渐变从浅粉变为浅蓝。

linear-gradient() 函数[test 1-5]的结果如图

②radial-gradient()函数：与线性渐变类似，它是一种径向渐变，由从原点发出的两种或者多种颜色之间的逐步过渡组成。

background-image:-webkit-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*); 

参数说明：

• position：用来定义径向渐变的圆心位置，默认为center。
• angle：表示角度，单位为deg。
• shape：定义径向渐变的形状，有两个可选值“圆形-circle”和“椭圆形-ellipse”，默认为椭圆。

test 6

.test6{ background-image: radial-gradient(circle,lightpink,#008c8c); }
设置径向渐变的形状为圆形，这里没有设置圆心位置，那么默认为center。

• size：定义了渐变的大小，它可以是以下四个值：
  closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边。
  farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边。
  closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角。
  farthest-corner：默认值，指定径向渐变的半径长度为从圆心到离圆心最远的角。
  左上为最近角，右上为最近边；左下为最远角，右下为最远边。

test 7

.test7{ background-image: radial-gradient(closest-side,lightpink,lightblue,tan); }

• color-stop：径向渐变的停止颜色，可以设置为一个负值。

③background-clip()函数：设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

background-clip:(content-box | padding-box | border-box | text)

参数说明–>

• border-box：背景延伸至边框外沿（但是在边框下层）。
• padding-box：背景延伸至内边距（padding）外沿。不会绘制到边框处。
• content-box：背景被裁剪至内容区（content box）外沿。
• text ：背景被裁剪成文字的前景色。

background-clip()函数[test1-4]的结果如图

常用十六进制颜色对照表代码查询