详解 linear-gradient 和 radial-gradient 的使用

前端快递小哥
4,289 阅读7分钟

前言

平时使用渐变一般都是 background:linear-gradient(red, yellow) 设置下渐变颜色，没有深入研究过，其他的我也不会😄
今天就来好好总结下它的使用方法，也方便以后查阅。

linear-gradient()

定义

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型，是一种特别的数据类型。

首先我们来看下什么是 linear-gradient()，根据 MDN的定义,它是图片，我们可以通过 linear-gradient() 函数创建几种颜色过渡生成的图片。

了解 linear-gradient() 的本质后，我们再来看下background:linear-gradient(red, yellow)，
既然函数生成的是图片，我们也可以通过 background-image:repeating-linear-gradient(blue, green); 来引入图片。
可以通过 background-size:16px 16px;来设置背景图片的大小等等。

语法

linear-gradient(angle | to <side-or-corner> ,<color> [ <color-stop-length> ]?)
首先来看整体的语法结构，分为两部分 angle | to <side-or-corner> <color> [ <color-stop-length> ]?来单独看每个部分。

angle | to <side-or-corner>

单管道符|。表示排他。也就是这个符号前后的属性值都是支持的，且不能同时出现。可以是 angle, <side-or-corner>其中一个。

// angle 为 90deg
.box{
   background:linear-gradient(90deg,red,yellow);
}

来看下 <side-or-corner> = [ left | right ] || [ top | bottom ]

[]表示范围。也就是支持的属性值在这个范围内。
|| 表示前后可以分开独立合法使用
继续来看 <side-or-corner> 这个 || 将 可选值分为[left|right] 和 [top|bottom]前后两个部分，这两个部分是同时可以出现的。所以下面有以下几种

  • to left
  • to right
  • to top
  • to bottom
  • left top
  • left bottom
  • right top
  • right bottom

<color> [ <color-stop-length> ]?

  • ？表示可选，也就是说 <color-stop-length>是可选值。
  • [] 表示支持那些值的范围，这里只有 <color-stop-length>
  • <color-stop-length> = [ <percentage> | <length> ]{1,2}
    • 同样 [] 中支持 percentage 和 length ，使用 | 单管道符，说明只能选一种类型。
    • {}表示值的个数,类似正则的语法。说明可以有1个 percentage 或者2 percentage (length同理)
  .box{
    // 支持 color-stop-lenght 为一个值的情况
    background:linear-gradient(to right,red 10% ,yellow 90%);
    // 支持 color-stop-lenght 为2个值的情况，注意这里 percentage 和 length不能混用
    background:linear-gradient(to right,red 10% ,70%,yellow 90% 100%);
  }

设置过渡方向

说完语法来看几个实例

background:linear-gradient(0deg,red,yellow)

当设置 deg 为 0的时候 red -> yellow 是从下到上

background:linear-gradient(90deg,red,yellow);

当设置 deg 为90deg时，当deg 增加的时候是顺时针旋转的。

background-image:linear-gradient(red, yellow)

默认情况为 180deg，你可以观察它是冲 0deg 顺时针旋转 180deg的效果。

color-stop-length 设置

当 color-stop-length 设置单个值

0-20% 都是 显示红色，20%-80% 过渡，80%-100% 显示的黄色

当 color-stop-length 设置两个值

0-20% 是绿色，20%-50% 是红色，50%-70% 过渡 ,70%-80%是黄色，由于后面没有设置颜色 80% - 100% 也是黄色

设置多个 linear-gradient()

多个 linear-gradient() 层级问题

这里我们第一个linear-gradient() 设置的是红色，并且将渐变色终止颜色设置透明度为0，这样可以通过透明度看到地下的蓝色，如果我们不设置终止颜色透明度，那么蓝色会被完全盖住。
所以可以得出，先添加的 linear-gradient 的层级更高。

.box{
  background:linear-gradient(0deg,rgba(255,0,0,1),rgba(255,0,0,0) 50%),  
             linear-gradient(180deg,rgba(0,0,255,1),rgba(0,0,255,1) 100%);
}

多个 linear-gradient() 效果

.box{
  background: linear-gradient(45deg, red ,rgba(255,0,0,0) 90%),  
              linear-gradient(225deg, rgba(67, 241, 67, 0.8), rgba(67, 241, 67, 0) 90%),  
              linear-gradient(135deg,rgba(255, 255,0, 0.8),rgba(255,255,0,0) 90%),  
              linear-gradient(-45deg,rgba(0, 0, 255,0.8),rgba(0,0,255,0) 90%);
}

repeating-linear-gradient

定义

CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的， 这是一个类似 linear-gradient 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个 数据类型的对象, 这是一个特殊的类型。

repeating-linear-gradient() css 函数同样也是创建一个渐变的图片，如果这个背景图片没有填充满背景，它会自动重复。和我们使用图片作为背景的原理一样。

设置重复渐变

background-image:repeating-linear-gradient(0deg, blue, green);

发现设置了 repeating-linear-gradient() 后并没有重复渐变的效果。来看第二个参数 <color> [ <color-stop-length> ]?因为当我们没有设置 <color-stop-length>默认是从 0%-100%,背景都被填满了所以没有 repeat。

background-image:repeating-linear-gradient(0deg, blue, green 10%)

当我们设置了 green 10% ，渐变从 0%-10% 开始渐变，没有填满整个背景，开始重复

background-image:repeating-linear-gradient(0deg, blue, green);background-size:100% 10%;

我们也可以通过 background-size:100% 10%;来控制填充背景颜色的大小。这样可以实现上面的效果。

进度条动画

设置进度条样式，通过 animation 来改变 background-position,来实现动态的效果。由于我们设置了 repeating-linear-gradient() 函数，即使背景的起点后移，也会填充满整个元素。

    <div class="progress-outer">
      <div class="progress-bg"></div>
    </div>

.progress-outer{
  background-color: rgba(180, 160, 120, .2);
  width:100%;
  height: 20px;
  border-radius: 20px;
}
.progress-bg{
  background-image:repeating-linear-gradient(-45deg,#D9CFBB  25%, #C3B393 0, #C3B393 50%, #D9CFBB 0, #D9CFBB 75%, #C3B393 0);
  width:60%;
  height: 100%;
  background-size:16px 16px;
  border-radius: 20px;
  animation: panoramic 5s linear forwards;
}

  @keyframes panoramic{
    to {
      width:100%;
      background-position: 160% 0;
    }
  }

radial-gradient

定义

radial-gradient() CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS数据类型的对象，其是 的一种

设置原点和形状， radial-gradient() 函数会创建对应形状的过渡效果。

语法

radial-gradient(
	[
    	[ circle || <length> ]                         [ at <position> ]? ,|
    	[ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]?,|
        at <position>,
    ]? <color-stop-list>
)

来看整个语法结构，实现看到？表示前面整个[]都是可以选的，可以不填，那么最简单的我们只需要写 <color-stop-list> 结构即可。也就是类似 background-image:radial-gradient(red,blue 50%,green 60%) 这种效果，具体的使用方法和 linear-gradient 相同。
接下来看下[]里表示可选值，|管道符将可选值分为三个可选值: [ circle || <length> ] [ at <position> ]?、 [ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]?、at <position>

<position>

[ [ left | center | right ] || [ top | center | bottom ]
|
 [ left | center | right | <length> | <percentage> ]
 [ top | center | bottom | <length> | <percentage> ]?
|
 [ [ left | right ] [ <length> | <percentage> ] ] &&
 [ [ top | bottom ] [ <length> | <percentage> ] ]
]

实例：

// || 表示前后都是独立的,两个都是需要填的
 [ left | center | right ] || [ top | center | bottom ]

left top 、left center ...... 九种组合

 [ left | center | right | <length> | <percentage> ]
 [ top | center | bottom | <length> | <percentage> ]?

？表示可以选，可以是单独 [ left | center | right | <length> | <percentage> ] 的一个值， 也可以是 left top、 left 10% 等 25 中选择

[ [ left | right ] [ <length> | <percentage> ] ] &&
 [ [ top | bottom ] [ <length> | <percentage> ] ]
  • right 10% bottom 30% 、left 10px top 30px 等16种组合。

[ circle || <length> ] [ at <position> ]?

  • background: radial-gradient(circle 50px at center, red, #b4a078,green)
* background: radial-gradient(circle at center, red, #b4a078,green);
* background: radial-gradient(circle at left top, red, #b4a078,green);
* background: radial-gradient(circle, red, #b4a078,green); 省略 at \ 默认是center

[ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]?

  • background:radial-gradient(ellipse 50px 20px at center, transparent 20px, blue );

at <position>

默认shape 为椭圆

不规则卡片效果

background-image:radial-gradient( circle at center top,transparent 20px,blue 21px);

background-image:radial-gradient( circle at center top,transparent 20px,blue);

如果我们不在结束颜色后设置终止位置，那么 20px-100% 之间都是过渡，我们将过渡结束设置在 21px ,这样可以得到一个切除的半圆的效果。

background-image:radial-gradient( circle at center top,blue 10px,transparent 11px);background-size:20px 15px;background-repeat:repeat-x;transform:rotate(180deg);

参考

You-need-to-know-css
mdn
10个demo示例学会CSS3 radial-gradient径向渐变

avatar
文章
阅读
粉丝
相关推荐
从gradient_checkpointing_enable中学习
215阅读
 · 
0点赞
「SwiftUI」Gradient渐变颜色填充效果
694阅读
 · 
0点赞
手把手实现一个Linear Gradient Generator
692阅读
 · 
12点赞
27岁程序媛未来的出路到底在哪里？
222k阅读
 · 
1.9k点赞
【自定义View】关于多色进度条GradientProgressView的绘制
768阅读
 · 
9点赞
在 React Router 中使用 JWT
302k阅读
 · 
172点赞
利用css径向渐变radial-gradient封装stylus、sass函数制作半圆透明切角效果
337阅读
 · 
6点赞
“当高启强遇到陈书婷”与TCP协议
308k阅读
 · 
207点赞
CSS 进阶：教你如何使用 repeating-linear-gradient 函数设计炫酷背景！
1.1k阅读
 · 
8点赞
锥形渐变只能画圆锥吗？conic-gradient 10大应用举例
1.9k阅读
 · 
31点赞

友情链接：