前端入门-css 径向渐变

篇我们将着重介绍css的径向渐变，注意它和线性渐变的区别。

径向渐变 —— radial-gradient

径向渐变与线性渐变的不同之处在于它从一个点开始向外散发。CSS渐变通常用于模拟光源，我们知道它并不总是直的。这使得径向渐变中颜色之间的过渡看起来更加自然。

为了创建一个径向渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。

同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法：

参数说明：

<position>：用来定义径向渐变的圆心位置，类似background-position，默认为center。可用关键字top、left、bottom、right、center、<length>、<percentage>或者同时使用2个关键字表示那个角如：top left（左上角）。

<angle>是角度，单位为deg。

<shape>：定义径向渐变的形状，有两个可选值“circle”（圆形）和“ellipse”（椭圆）。

<size>：用来确定径向渐变的半径长度大小，默认值为“farthest-corner”，其他值：

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

<stop > = <color> [ <length> | <percentage>]:

<color>：指渐变得起止颜色。

<length>：用长度值指定起止色位置，不允许负值。

<percentage>：用百分比指定起止色位置。

最基本的径向渐变

我们没有声明任何属性，只设置了2种颜色，如下示例：

.gradient {
  background-image:
    radial-gradient(
      #fff000,
      #e52e71
    );
}

如上图，颜色从中心点向外扩散，这就是最简单的径向渐变。

改变形状

径向渐变默认是ellipse（椭圆）的，我们还可以使渐变的形状改变成circle（圆形），如下示例：

background-image:
    radial-gradient(
      circle,
      #fff000,
      #e52e71
    );

圆形的渐变

为了更好地观察圆形和椭圆的区别，看如下动画，从椭圆变成圆形：

改变圆心位置

用来定义径向渐变的圆心位置，类似background-position，默认为center，除此还可以使用top、left、bottom、right、center、<length>、<percentage>等值。以及提供两个命名值（例如 top center）的组合表示圆心的位置。

如下示例：

/*圆心在左边中心*/
background-image:
    radial-gradient(
      circle at top right,
      #0000ff,
      #e52e71
);

圆心在左边

/*圆心在右上角*/
background-image:
    radial-gradient(
      circle at top right,
      #0000ff,
      #e52e71
);

圆心在右上角

/*圆心在距离左边100px位置*/
.gradient{
  height:300px;
  width:300px;
  background-image:
    radial-gradient(
      at 100px,
      #0000ff,
      #e52e71
    );
}

距左边100px位置

/*圆心在距离左边30%位置*/
.gradient{
  height:300px;
  width:300px;
  background-image:
    radial-gradient(
      at 30%,
      #0000ff,
      #e52e71
    );
}

左边30%位置

使用多个颜色

径向渐变也可以设置多个颜色的渐变,每种颜色以逗号隔开，如下示例：

background: radial-gradient(lime, red ,cyan, yellow );

改变颜色的结束位置

和线性渐变一样，径向渐变的颜色也可以改变其结束位置，如下示例：

background-image:
    radial-gradient(
      red 28px, blue 80%, green
    );

创建实线

使其相邻颜色的结束位置一样，如下示例：

background: radial-gradient(cyan 50%, red 50% );

色带和条纹

创建一个径向的色带，如下示例：

.multiposition-stops {
   background: radial-gradient(
       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
}
或
.multiposition-stops {
   background: radial-gradient(
       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
}

我们将上面的每种颜色的结束位置改成等于后面颜色的开始位置，就会形成径向的条纹效果，如下示例：

background: radial-gradient(
       lime 20%, red 20% 45%, cyan 35% 70%, yellow 70% );

改变渐变的半径长度

用来确定径向渐变的结束形状大小，默认值为“farthest-corner”，其他值：

closest-side：指径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner：指径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side：指径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner：指径向渐变的半径长度为从圆心到离圆心最远的角；

如下示例：

html：

<div class="grid">
  <div class="item gradient4">farthest-side(离圆心最远的边)</div>
  <div class="item gradient2">closest-side(离圆心最近的边)</div>
  <div class="item gradient1">farthest-corner(离圆心最远的角)</div> 
  <div class="item gradient3">closest-corner(离圆心最近的角)</div>
</div>

css：

/*指定径向渐变的半径长度为从圆心到离圆心最远的角*/
.gradient1 {
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, #f8f8f8); 
}
/*指定径向渐变的半径长度为从圆心到离圆心最近的边*/
.gradient2 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, #f8f8f8); 
}
/*指定径向渐变的半径长度为从圆心到离圆心最近的角*/
.gradient3 {
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, #f8f8f8);
}
/*指定径向渐变的半径长度为从圆心到离圆心最远的边*/
.gradient4 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, #f8f8f8); 
}

效果如下：

如上所示，就是渐变半径长度不同类型，注意这里如果圆心的位置在正中间，farthest-corner 和 closest-corner 一样，同理 farthest-side 与 closest-side也一样。

最后

到此已经介绍了径向渐变的使用方法，下面将会继续介绍其它渐变的使用方法，你可以关注我，继续学习其它渐变知识。

其它相关文章：

css 线性渐变
css 径向渐变
css 圆锥渐变
css 重复渐变

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

https://css-tricks.com/a-complete-guide-to-css-gradients/

文翻译自 Learn CSS radial-gradient by Building Background Patterns，作者：Temani Afif 略有删改

如果你是CSS渐变的新手，你可能听说过radial-gradient()。如果以前从未使用过它，那么这篇文章适合你。

在本教程中，我将重点介绍一些真实的和实用的示例，以解释radial-gradient()背后的秘密以及它是如何工作的。

CSS渐变通常用于创建花哨的图案，因此我选择了其中一些仅使用radial-gradient()制作的图案。通过构建它们，我们将了解有关这些渐变的一切。

径向渐变模式#1

让我们从最基本的模式开始。

看上面的图并没有什么复杂的，我们只是重复循环画圆。圆、椭圆、半圆、四分之一圆等等我们都可以使用radial-gradient()创建。

为了简单起见，我们可以考虑椭圆作为主要形状，然后通过隐藏一些部分，我们可以得到半个圆，四分之一个圆等等。

我们放大上面的一个圆来具体分析。

我们正在绘制一个尺寸为100px*100px的区域，该区域是我们的background-size。我们将考虑水平半径等于50%，垂直半径等于50%，形状的中心将是区域的中心。

椭圆由两个半径定义，称为“水平半径”和“垂直半径”。如果两者相等（就像我们的例子一样），我们得到的就是一个圆。

到此我们可以得到以下代码：

html {
  background-image: radial-gradient(50% 50% at center, ???);
  background-size: 100px 100px   
}

我们定义了渐变的设置，现在我们需要定义颜色配置。我们将绘制一个不会接触background-size区域边缘的圆。从50%，我们将有80%的颜色，其余部分将是透明的。

html {
  background-image: radial-gradient(50% 50% at center, #c39f76 0% 80%,#0000 81% 100%);
  background-size: 100px 100px   
}

我们首先定义椭圆的中心和大小（50% 50% at center），然后用渐变色填充它（c39f76 0 80%,#0000 81% 100%）。在这种情况下，我们得到一个完整的圆，因为两个半径相等（50%和100px），并且因为我们在颜色之间没有过渡。

我们有从0%到80%的主色和从81%到100%的透明色。(应该使用80%而不是81%，但我们保留了一个小的过渡以避免锯齿状边缘。）

我们可以通过删除默认值来优化上面的代码，以获得以下内容：

html {
  background-image: radial-gradient(50% 50%,#c39f76 80%,#0000 81%);
  background-size: 100px 100px   
}

默认情况下位置是中心，我们可以从颜色配置中省略0%和100%。

以上并不是实现该模式的唯一语法。我们还可以使用以下方式：

html {
  background-image: radial-gradient(40% 40%,#c39f76 99%,#0000);
  background-size: 100px 100px   
}

我们减小了圆圈的半径，增加主颜色的百分比。请注意这里没有定义任何透明颜色的百分比，因为它应该是100%（默认值），我们可以省略。

我们还可以使用以下方式：

html {
  background-image: radial-gradient(#c39f76 56%,#0000 57%);
  background-size: 100px 100px   
}

我们省略半径，浏览器将使用默认设置，需要另一种颜色配置。不必记住所有的案例，只要坚持一种简单的方法（我推荐第一种）。稍后将通过实践，您将发现实现相同结果的不同方法，并且能够优化语法以减少所使用的代码量。

径向渐变模式#2

这一次用了两个radial-gradient()。我们可以使用尽可能多的背景层，这是一个很不错的功能，它允许我们通过将不同的渐变与不同的配置相结合来构建复杂的图案。

我们在这里保持相同的background-size，但我们使用不同的位置为我们的圈子。代码如下：

html {
   background-image: 
     radial-gradient(?? at 25% 25%,??),
     radial-gradient(?? at 75% 75%,??);
   background-size: 100px 100px; 
}

对于半径配置，如果我们做一些数学计算，我们可以发现我们需要25%使两个圆接触边缘。我们可以使用这个代码：

html {
   background-image: 
     radial-gradient(25% 25% at 25% 25%,#c39f76 80%,#0000 81%),
     radial-gradient(25% 25% at 75% 75%,#c39f76 80%,#0000 81%);
   background-size: 100px 100px; 
}

我们也可以使用closest-side代替25% 25%。这是一个奇怪的值，但它的意思是“使用一个半径值，允许圆接触最接近其中心的边”。这个值很有用，可以使我们避免处理一些复杂的计算。

html {
   background-image: 
     radial-gradient(closest-side at 25% 25%,#c39f76 80%,#0000 81%),
     radial-gradient(closest-side at 75% 75%,#c39f76 80%,#0000 81%);
   background-size: 100px 100px; 
}

radial-gradient()为我们提供了其他3个类似的值（closest-corner、farthest-side和farthest-corner）。我们要么为半径定义一个明确的大小，要么使用这些值，浏览器将根据特定规则自动查找半径。

径向渐变模式#3

在第一和第二模式之后，我们现在可以尝试更复杂的模式。这一次使用两个渐变，使用两个半圆的组合，不绘制整个圆。

下面是一个例子来帮助你理解这个谜题。我使用不同的颜色来轻松识别每个渐变。

第一个渐变的中心位于50% 100%，而第二个渐变的中心位于50% 0%，但我们也可以使用top和bottom作为它们的等效值。

html {
   background-image: 
     radial-gradient(?? at top   ,??),
     radial-gradient(?? at bottom,??);
   background-size: 100px 100px; 
}

对于半径，我们可以像以前一样使用50% 50%，但这次我将尝试不同的东西，并考虑50px，它是background-size的一半。

当使用像素值或任何不同于百分比的单位时，我们只能指定一个半径，浏览器将理解我们想要一个具有该半径的圆。这是另一种定义形状大小的方法，除了百分比和特定值。

我们的圆将接触边缘，最终的代码如下：

html {
   background-image: 
     radial-gradient(50px at top   ,#c39f76 99%,#0000),
     radial-gradient(50px at bottom,#c39f76 99%,#0000);
   background-size: 100px 100px; 
}

上面的代码并不是我们最终想要的模式，我们还需要最后的润色。如果您检查上一个插图，您会注意到第二个渐变（绿色的）向右移动了一半大小。换句话说，我们需要更新它的background-position：

html {
   background-image: 
     radial-gradient(50px at top   ,#c39f76 99%,#0000),
     radial-gradient(50px at bottom,#c39f76 99%,#0000);
   background-position: 0 0, 50px 0;
   background-size: 100px 100px; 
}

我们可以通过使用简写版本来优化代码：

html {
   background: 
     radial-gradient(50px at top   ,#c39f76 99%,#0000),
     radial-gradient(50px at bottom,#c39f76 99%,#0000) 50px 0;
   background-size: 100px 100px; 
}

由于我们处理的是像素值，我们可以添加一个CSS变量，使代码易于调整。

html {
   --s: 100px;
   background: 
     radial-gradient(calc(var(--s)/2) at top   ,#c39f76 99%,#0000),
     radial-gradient(calc(var(--s)/2) at bottom,#c39f76 99%,#0000) calc(var(--s)/2) 0;
   background-size: var(--s) var(--s); 
}

径向渐变模式#4

乍一看，这个背景看起来有点复杂。但如果我们能识别出正确的模式，那就很容易了。直觉上，你可能认为模式就是这个，你会很难找到渐变的方式。

但事实并非如此真实的的模式是这个

我们有4个圆圈放置在角落。代码如下：

html {
   background: 
     radial-gradient(closest-corner at 20% 20%,#c39f76 98%,#0000),
     radial-gradient(closest-corner at 80% 20%,#c39f76 98%,#0000),
     radial-gradient(closest-corner at 20% 80%,#c39f76 98%,#0000),
     radial-gradient(closest-corner at 80% 80%,#c39f76 98%,#0000);
   background-size: 100px 100px;
}

closest-corner定义半径的一个很好的用法。对于每个层，浏览器将绘制一个放置在特定位置的圆，并触摸最近的边缘。此设置允许我们使用一个简单的颜色配置，同时有所需的溢出。

我们也可以使用closest-side，如下所示：

html {
   background: 
     radial-gradient(closest-side at 20% 20%,#c39f76 140%,#0000 141%),
     radial-gradient(closest-side at 80% 20%,#c39f76 140%,#0000 141%),
     radial-gradient(closest-side at 20% 80%,#c39f76 140%,#0000 141%),
     radial-gradient(closest-side at 80% 80%,#c39f76 140%,#0000 141%);
   background-size: 100px 100px;
}

上面代码中唯一的新内容是颜色配置，其中我使用的值大于100%。由于我使用closest-side来定义半径，所以我需要比100%更大才能创建溢出的效果。

径向渐变模式#5

这是另一个非直观的模式，可能会让很多人感到困惑。你可能会把它看作是一个半满的圆圈，但实际上它是两个半圆的组合，如下所示：

代码如下：

html {
  background:
    radial-gradient(50% 50% at left ,#0000 70%,#c39f76 71% 80%,#0000 81%),
    radial-gradient(50% 50% at right,#c39f76 0 80%,#0000 81%);
  background-size: 100px 100px;
}

这一次我们将每一个使用不同的颜色配置。第一个有3种颜色（透明，然后是主颜色，然后再次透明）。第二个具有与我们在前面的示例中使用的相同的颜色配置。

这个图案是一个很好的例子，展示了不同的颜色配置如何成为获得复杂背景图案的另一种方法。

径向渐变模式#6

这是另一个不容易识别的模式，但如果我们仔细观察，我们可以看到两个圆圈。

大圆圈是我们的第一层。

它是一个放置在区域中心的圆圈（像往常一样用background-size定义），但这次颜色配置不像往常一样。我使用透明的颜色为内部和外部的主要颜色。值得注意的是，我们也有一个小的溢出，如下代码所示使用了54%而不是50%来创建溢出。

html {
  background-image: radial-gradient(54% 54%,#0000 98%,#c39f76);
  background-size: 100px 100px;
}

第二层是一个较小的圆圈，以白色为主色。整个代码将是：

html {
  background: 
    radial-gradient(10% 10%,#fff 98%,#0000),
    radial-gradient(54% 54%,#0000 98%,#c39f76) 50px 50px;
  background-size:100px 100px;
}

注意50px 50px的用法。与第三个图案一样，我们需要将其中一个层移动一半大小以获得正确的结果-否则两个圆将具有相同的中心，这不是预期的结果。

径向渐变模式#7

这是我们结束前的最后一个模式：

在最后一个例子中，我想介绍repeating-radial-gradient()，这是编写radial-gradient()的另一种方式。

我们的模式如下：

我们可以使用radial-gradient()来实现上面的功能，但是颜色配置会变得太长（透明，主颜色，透明，主颜色，等等）。

在这种情况下，颜色配置只不过是“透明，主色”的重复图案，并且repeating-radial-gradient()是为了这样的目的而制作的。

html {
  background-image: repeating-radial-gradient(#0000 0% 12%,#c39f76 13% 26% );
  background-size:100px 100px;
}

上面的意思是我们有12%的透明颜色，然后有13%的主要颜色（26-13=13），然后我们重复相同的步骤直到覆盖整个区域。

最后

通过探索如何创建不同的背景图案，我们涵盖了radial-gradient()的基础知识。文章到此结束，但这仅仅是个开始，有兴趣的可以继续尝试使用radial-gradient()构建自己的模式。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

SS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式

之前也有写过 CSS 优惠券样式《CSS3径向渐变实现优惠券波浪造型》，这次再来温习一遍，并且将更为详细的讲解，从布局到具体样式说明，最后定义 CSS 变量，自定义主题颜色。

布局

布局其实是学习前端的重要部分，最常用的方式就是从上而下、从左而右、亦或者两个相结合。

看上图，而这里，我们就只是最简单的布局方式，从上而下：

1、优惠券金额和过期时间

2、优惠券描述

3、按钮（其实按钮也可以放到“2”里面去）

这样分析，我们就有了 html 架构了

<div class="coupon">
  <!-- 1、优惠券金额和过期时间 -->
  <div class="price">
    100元
    <span>优惠券</span>
    <p class="timeout">2020-12-31 18:18:18过期</p>
  </div>

  <!-- 2、优惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、过期作废</p>
  </div>

  <!-- 3、按钮 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式

CSS修饰

接下来我们用 CSS 美化我们的 html 。同理，我们也根据布局分步进行样式书写。

1、优惠券金额和过期时间样式

这里的核心就是上方的凹槽和下方的锯齿

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css变量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式

这里用到了径向渐变，不清楚用法的小伙伴可以看看语法：

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

注释：

（1）、shape 确定圆的类型:

ellipse (默认): 指定椭圆形的径向渐变。

circle ：指定圆形的径向渐变

（2）、size 定义渐变的大小，可能值：

farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角

closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

（3）、position 定义渐变的位置。可能值：

center（默认）：设置中间为径向渐变圆心的纵坐标值。

top：设置顶部为径向渐变圆心的纵坐标值。

bottom：设置底部为径向渐变圆心的纵坐标值。

（4）、start-color, ..., last-color 用于指定渐变的起止颜色。

这样价格上方的凹槽就有了，接下来下方的锯齿我们也可以用径向渐变的方式实现：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

伪类元素 ::after 设置径向渐变背景为一个圆，后进行平铺就形成了锯齿，调整位置。

CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式

其实还有更简单的方法，可以直接用一个虚线边框即可搞定，请看：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式

当然也有缺陷，间隔位置不好控制

2、优惠券描述与按钮优惠券核心锯齿已经搞定了，下面都是小菜啦，非常简单咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按钮样式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式

主题颜色

大家都看到了，我们上方代码主要颜色都采用的变量，而且变量是定义在 .coupon 类选择器里面的。这样的原因是：

1、CSS变量作用域（CSS变量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）

2、方便主题使用

ok，我们就可以copy 多个优惠券，并给每个添加一个不同的 class，比如下方的 theme1、theme2、theme3

<div class="coupon theme1">
  ...
</div>
<div class="coupon theme2">
  ...
</div>
<div class="coupon theme3">
  ...
</div>
<div class="coupon">
  ...
</div>

接下来我们就为不同主题定义不同的颜色变量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

这样，theme1主题下的优惠券，就是紫色主题，theme2主题下的优惠券，就是蓝色主题...，而默认主题颜色就是我们 .coupon 类选择器里面的定义的变量颜色（红色）。

小结

今天你学到了吗？从布局分析到具体实现，再到主题颜色，相信小伙伴们都各有所得。

在线咨询

上一篇：Web前端设计秘籍-30个工作中常用的CSS样式
下一篇：HTML基础操作：图片显示

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端入门-css 径向渐变

径向渐变 —— radial-gradient

最基本的径向渐变

改变形状

改变圆心位置

使用多个颜色

改变颜色的结束位置

创建实线

色带和条纹

改变渐变的半径长度

最后

径向渐变模式#1

径向渐变模式#2

径向渐变模式#3

径向渐变模式#4

径向渐变模式#5

径向渐变模式#6

径向渐变模式#7

最后

布局

CSS修饰

1、优惠券金额和过期时间样式

主题颜色

小结

您的项目需求