CSS探索系列 Gradient

<gradient> 是一种特别的<image>数据类型，用于表现两种或多种颜色的过渡转变。<gradient>只能被用于<image>可以使用的地方。因此，它并不适用于background-color以及类似的使用<color>数据类型的属性中。

通常，在CSS中渐变就是background的background-image，也就是说，适用于背景图像的CSS属性都适合于渐变。

渐变容器（渐变框）

<gradient> 图像和传统的背景图像不一样，它是无限的渐变图像，可见区域是由渐变容器大小来决定的。

一个DOM元素的background-image使用linear-gradient，其显示区域就是元素的border-box区域（即：包括内容、内边距和边框，但不包括外边距）。其实也是background-color或者说通过url引入背景图像的显示区域。

然而，如果你通过CSS的background-size设置一个尺寸，比如说200px * 200px，这个时候渐变容器（渐变尺寸）就是200px * 200px。在没有使用background-position设置为其他值时，它默认是显示在DOM元素的左上角（也就是background-position: left top）。

线形渐变

颜色值沿着一条隐式的直线逐渐过渡。由linear-gradient()创建一个表示两种或多种颜色线性渐变的图片。

语法

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

• <side-or-corner>

  通过指向边或者角，指定渐变的方向，可不写，默认值为 to bottom。

  取值：to left/ to right/ to top/ to bottom/ to top left/ to bottom right。关键词的先后顺序无影响，即to top left和to left top是一样的。

• <angle>

  用角度值指定渐变的方向（或角度），可不写，默认值为 180deg（等价to bottom）。 0deg表示指向北方的方向，角度顺时针增加。

  取值：90deg、135deg、0.25turn、100grid、1rad。

  在带前缀的变体和不带前缀的提案之间仍然存在一项语义的分歧：标准将0deg指向北方，带前缀的保持原始的角度定义，即0deg指向东方。

  CSS角度单位：deg、grad、rad、turn

  90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

  • deg：度（Degress）。一个圆共360度

  • grad：梯度（Gradians）。一个圆共400梯度

  • rad：弧度（Radians）。一个圆共2π弧度

  • turn：转、圈（Turns）。一个圆共1圈

• <linear-color-stop>

  颜色终止点，由<颜色值 位置>组成，位置可不写。如：#e66465、#e66465 50%、#e66465 100px等。可写两个或多个颜色终止点。

  颜色终止列表中颜色的终止点应该是依次递增的。如果一个颜色中间点的位置比前一个小，那么将会被设定成与前一个相同的值。

  如果第一个颜色中间点没有位置属性,那么它默认为0%。如果最后一个颜色中间点没有位置属性, 则默认为100%。如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。

• <color-hint>

  定义了在相邻<linear-color-stop>之间过渡的中点，默认值50%。注：相邻两个<linear-color-stop>之间只能有一个过渡点。

background-image: linear-gradient(#e66465, #9198e5); /*下图左，与【#e66465, 50%, #9198e5】等价*/
background-image: linear-gradient(#e66465, 10%, #9198e5); /*下图中*/
background-image: linear-gradient(#fb3 40%, #e66465 30%, #9198e5); /*下图右*/

image-20200716232328505

示例 查看DEMO

<section class="box_01">
    <div class="item_01"></div>
    <div class="item_01"></div>
    <div class="item_01"></div>
    <div class="item_01"></div>
</section>

.box_01 .item_01 {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-right: 15px;
    border: 1px solid #0aa;
    background-image: linear-gradient(#e66465, #9198e5);
}
.box_01 .item_01:nth-child(2) {
    background-image: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
}
.box_01 .item_01:nth-child(3) {
    background-image: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
        linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
        linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
}
.box_01 .item_01:nth-child(4) {
    background-image: linear-gradient(#3f87a6 33.33%, #fb3 0, #fb3 66.66%, #e45b5a 0);
    background-size: 100% 42px;
}

image-20200716234706958

径向渐变

颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。由radial-gradient()函数产生。

语法

radial-gradient([ <shape> [<extent-keyword> | <size>] at <position> ]? <linear-color-stop> [<color-hint>] <linear-color-stop> ... )

• <position>

  表示用于设置相对于框的位置的2D空间中的坐标，即x轴、y轴坐标，默认值center。

  取值：关键字（left, right, top, bottom or center），或者百分比，或是一个绝对的长度值

  如：left、left top、left center、center top、50%、100px、5rem等。x轴、y轴都是关键字时，顺序无影响。

• <shape> 渐变的形状，默认值ellipse（椭圆）。

  取值：ellipse（椭圆）、circle（正圆）

• <size> 渐变圆的半径长度。

  当渐变类型为 circle 时，只能指定一个size值，值必需为具体的长度值，即直径；当渐变类型为 ellopse时，可以指定两个size值，即水平半径，垂直半径，值可以为具体的长度值或者百分比。

• <extent-keyword> 关键字用于描述边缘轮廓的具体位置。以下为关键字常量：

  常量	描述
  closest-side	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
  closest-corner	渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
  farthest-side	与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
  farthest-corner	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

• <linear-color-stop>

  颜色终止点，由<颜色值 位置>组成，位置可不写。如：#e66465、#e66465 50%、#e66465 100px等。可写两个或多个颜色终止点。

  颜色终止列表中颜色的终止点应该是依次递增的。如果一个颜色中间点的位置比前一个小，那么将会被设定成与前一个相同的值。

  如果第一个颜色中间点没有位置属性,那么它默认为0%。如果最后一个颜色中间点没有位置属性, 则默认为100%。如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。

• <color-hint>

  定义了在相邻<linear-color-stop>之间过渡的中点，默认值50%。

示例 查看DEMO

<section class="box_02">
    <div class="item_02"></div>
    <div class="item_02"></div>
    <div class="item_02"></div>
    <div class="item_02"></div>
    <div class="item_02"></div>
    <div class="item_02"></div>
</section>

.box_02 .item_02 {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-right: 15px;
    border: 1px solid #0aa;
    background-image: radial-gradient(#ff0, #9198e5);
}
.box_02 .item_02:nth-child(2) {
    background-image: radial-gradient(at top, #ff0, #9198e5);
}
.box_02 .item_02:nth-child(3) {
    background-image: radial-gradient(circle at top, #ff0, #9198e5);
}
.box_02 .item_02:nth-child(4) {
    background-image: radial-gradient(circle closest-corner at top, #ff0, #9198e5);
}
.box_02 .item_02:nth-child(5) {
    background-image: radial-gradient(ellipse 50px 50px at top, #ff0, #9198e5);
}
.box_02 .item_02:nth-child(6) {
    background-image: radial-gradient(#3f87a6 33.33%, #fb3 0, #fb3 66.66%, #e45b5a 0);
    background-size: 42px 42px;
}

image-20200717005804964

圆锥渐变

圆锥渐变创建一个图像，由一个梯度组成，颜色起始点是图形中心，然后以顺时针方向绕中心实现渐变效果（而不是从中心辐射）。由conic-gradient()函数产生。

语法

conic-gradient([ from <angle> ]? [ at <position> ]?, <angular-color-stop> [<color-hint>] <angular-color-stop> ... ) )

• <angle>

  颜色围绕中心点旋转的角度值，可不写，默认值为0deg（指向北方）。

• <position>

  表示用于设置相对于框的位置的2D空间中的坐标，即x轴、y轴坐标，默认值center。

  取值：关键字（left, right, top, bottom or center），或者百分比，或是一个绝对的长度值

  如：left、left top、left center、center top、50%、100px、5rem等。x轴、y轴都是关键字时，顺序无影响。

• <angular-color-stop> 颜色终止点，由<颜色值 角度>组成，位置可不写。如：#e66465、#e66465 90deg、#e66465 0.25turn、#e66465 0.25turn 0.75turn等。可写两个或多个颜色终止点。

• <color-hint>

  定义了在相邻<angular-color-stop>之间过渡的中点，默认值50%。

示例 查看DEMO

<section class="box_03">
    <div class="item_03"></div>
    <div class="item_03"></div>
    <div class="item_03"></div>
    <div class="item_03"></div>
    <div class="item_03"></div>
    <div class="item_03"></div>
    <div class="item_03"></div>
</section>

.box_03 .item_03 {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-right: 15px;
    border: 1px solid #0aa;
    background-image: conic-gradient(red, orange, yellow, green, teal, blue, purple);
}
.box_03 .item_03:nth-child(2) {
    background-image: conic-gradient(from 40deg, red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg)
}
.box_03 .item_03:nth-child(3) {
    background-image: conic-gradient(from 40deg at 25% 25%, red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg)
}
.box_03 .item_03:nth-child(4) {
    background-image: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
}
.box_03 .item_03:nth-child(5) {
    background-image: conic-gradient(red 12.5%, orange 0 37.5%, red 0 62.5%, orange 0 87.5%, red 0);
    background-size: 50px 50px;
}
.box_03 .item_03:nth-child(6) {
    background-image: conic-gradient(#3f87a6 33.33%, #fb3 0, #fb3 66.66%, #e45b5a 0);
    background-size: 42px 42px;
}
.box_03 .item_03:nth-child(7) {
    position: relative;
    background: conic-gradient(rgba(255, 152, 0, 1) 0, rgba(255, 152, 0, 0) 100%);
    border: 0;
    text-align: center;
    vertical-align: top;
}
.box_03 .item_03:nth-child(7):after {
    position: absolute;
    top: 10%;
    left: 10%;
    display: block;
    width: 80%;
    height: 80%;
    content: " ";
    background: #fff;
}

image-20200724230512764

重复渐变

重复多次渐变图案直到足够填满指定元素。

重复线性渐变

repeating-linear-gradient()创建一个由重复线性渐变组成的<image>， 这是一个类似 linear-gradient 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器。

重复径向渐变

repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的<image> 。它类似于radial-gradient 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。

重复圆锥渐变

repaeting-conic-gradient 创建一个颜色过渡旋转围绕中心点的重复渐变组成的<image> 。重复圆锥渐变语法与conic-gradient()相似。

示例 查看DEMO

<section class="box_04">
    <div class="item_04"></div>
    <div class="item_04"></div>
    <div class="item_04"></div>
    <div class="item_04"></div>
    <div class="item_04"></div>
    <div class="item_04"></div>
</section>

.box_04 .item_04 {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-right: 15px;
    border: 1px solid #0aa;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, orange 25px, orange 50px);
}
.box_04 .item_04:nth-child(2) {
    background-image:
        repeating-linear-gradient(transparent, transparent 23%, orange 23%, orange 27%),
        repeating-linear-gradient(90deg, transparent, transparent 23%, orange 23%, orange 27%);
}
.box_04 .item_04:nth-child(3) {
    background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
.box_04 .item_04:nth-child(4) {
    background-image: repeating-radial-gradient(circle, red, red 10px, yellow 10px, yellow 20px);
    background-size: 25px;
}
.box_04 .item_04:nth-child(5) {
    background-image: repeating-conic-gradient(red 0 9deg, yellow 9deg 18deg);
}
.box_04 .item_04:nth-child(6) {
    background-image: repeating-conic-gradient(red 0 9deg, yellow 9deg 18deg);
    background-size: 50px 50px;
}

image-20200725001722017

其他渐变 查看DEMO

<section class="box_05">
    <div class="item_05"></div>
    <div class="item_05">
        <div>愿你走出</div>
    </div>
    <div class="item_05">
        <div text="半生归来">半生归来</div>
    </div>
    <div class="item_05">
        <div>
            <svg viewBoxs="0 0 500 300" class="svgBox">
                <defs>
                    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
                        <stop offset="0" style="stop-color: red" />
                        <stop offset="1" style="stop-color: orange" />
                    </linearGradient>
                </defs>
                <text text-anchor="middle" class="gradient-text-three" x="100px" y="30%">仍是少年</text>
            </svg>
        </div>
    </div>
</section>

.box_05 .item_05 {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-right: 15px;
    vertical-align: middle;
    border: 1px solid #0aa;
}
.box_05 .item_05:nth-child(1) {
    border: 10px solid transparent;
    border-image: linear-gradient(to top, red, orange);
    border-image-slice: 10;
}
.box_05 .item_05:nth-child(2)>div {
    height: 60px;
    margin-top: 60px;
    font-size: 42px;
    background-image: linear-gradient(to top, red, orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}
.box_05 .item_05:nth-child(3)>div {
    height: 60px;
    margin-top: 60px;
    font-size: 42px;
    position: relative;
    color: red;
    text-align: center;
}
.box_05 .item_05:nth-child(3)>div:before {
    position: absolute;
    color: orange;
    -webkit-mask: linear-gradient(to top, red, transparent);
    content: attr(text);
    z-index: 1;
}
.box_05 .item_05:nth-child(4)>div {
    height: 60px;
    margin-top: 60px;
    text-align: center;
}
.box_05 .item_05:nth-child(4)>div .gradient-text-three {
    fill: url(#SVGID_1_);
    font-size: 48px;
}

image-20200727221512513

常见问题

iPhone 设备兼容

iPhone 11pro 不支持如下写法：

background: linear-gradient(to bottom, rgba(255, 0, 0, 0.1), white 10%, white);

背景渐变色应避免用 rgba 设置透明度。

参考链接

MDN 使用 CSS 渐变

MDN linear-gradient

神奇的 conic-gradient 圆锥渐变

复杂的css背景图