Gradients

Table of Contents

CSS3 渐变(Gradients)可以让你在 两个或多个 指定的颜色之间显示平稳的过渡。它定义了两种类型的渐变:

线性渐变

为了创建一个线性渐变,你必须 至少 定义 两种 颜色节点(呈现平稳过渡的颜色),同时还可以设置一个 方向/角度 (缺省为 从上到下/180deg )。

background-image: linear-gradient([direction/angle, ] color-stop1, color-stop2, ...);

1. 方向

.grad { background-image: linear-gradient(#147, #f66); }
.grad { background-image: linear-gradient(to right, #147, #f66); }
.grad { background-image: linear-gradient(to bottom right, #147, #f66); }

2. 角度

!!! 很多浏览器(Chrome、Safari、firefox)使用了就的标准,即 0deg 将创建一个 从左到右 的渐变, 90deg 将创建一个 从下到上 的渐变。

.grad { background-image: linear-gradient(45deg, #147, #f66); }

3. 多个颜色节点

.grad { background-image: linear-gradient(red, green, blue); }

4. 重复的线性渐变

repeating-linear-gradient() 函数用于重复性渐变,如下:

.grad { background-image: repeating-linear-gradient(red, green 10%, blue 20%); }

径向渐变

径向渐变由它的中心定义。为了创建一个径向渐变,你也必须至少定义 两种 颜色节点,同时,还可以指定渐变的 中心、形状、大小 (缺省为 center (中心点) elipse (椭圆) 、 farthest-corner (最远的角落))。

background-image: radial-gradient([shape size at position], start-color, ..., last-color);

1. 均匀分布

.grad { background-image: radial-gradient(red, green, blue); }

2. 不均匀分布

.grad{ background-image: radial-gradient(red 5%, green 15%, blue 60%); }

3. 设置形状

.grad { background-image: radial-gradient(circle, red, green, blue); }

4. 设置尺寸

size 定义了渐变的大小,它有 4 个值:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
.grad { background-image: radial-gradient(closest-side at 60% 55%, red, green, blue); }

5. 重复的径向渐变

.grad{ background-image: repeating-radial-gradient(red, green 10%, blue 15%); }

渐变应用

颜色渐变可以用于很多地方,如 背景色、渐变边框 等。

渐变边框

.borderimg { border-image: linear-gradient(to right, #147, #f66) 30 30; }

其实,该页面的内容边框线渐变色便是上述代码设置的,我们来看一看 border-image

border-image

border-image: source slice width outset repeat|initial|inherit;
属性 描述
border-image-source none/url 指定要用于绘制边框的图像
border-image-slice number/%/fill 图像边界向内偏移
border-image-width number/%/auto 图像边界的宽度
border-image-outset length/number 指定在边框外部绘制 border-image-area 的量
border-image-repeat stretch/repeat/round/space/initial/inherit 设置图像边界是否应拉伸、重复或铺满

具体应用的时候再做补充,不用刻意去记,记也记不住 ^_||

Date: 2020-02-07 Fri 13:54

Author: Jack Liu

Created: 2020-02-08 Sat 21:26

Validate