之前也有写过 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 美化我们的 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;
}

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

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 设置径向渐变背景为一个圆，后进行平铺就形成了锯齿，调整位置。

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

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

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

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;
}

主题颜色

大家都看到了，我们上方代码主要颜色都采用的变量，而且变量是定义在 .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 类选择器里面的定义的变量颜色（红色）。

小结

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

天逛论坛，发现有人问了这样一个问题：

有位大佬直接po上了代码，随手学一下。

实现效果如下：

代码如下：

<div class="container">
   <div class="wrap">
      <div class="box t"></div>
      <div class="box r"></div>
      <div class="box b"></div>
      <div class="box l"></div>
   </div>
</di>

光html, body {
   height: 100%;
}

.container {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.wrap {
   width: 200px;
   height: 200px;
   transform-style: preserve-3d;
}

.box {
   position: absolute;
   width: 200px;
   height: 200px;
   background: grey;
}

.t {
   background: red;
   transform: translate(0, -125px) rotateY(1deg);
}

.r {
   background: blue;
   transform: translate(125px, 0) rotateX(-1deg);
}

.b {
   background: green;
   transform: translate(0, 125px) rotateY(-1deg);
}

.l {
   background: yellow;
   transform: translate(-125px, 0) rotateX(1deg);
}

感谢@MuTool 大佬

平时开发中，有时候会碰到下面这种“弧形”样式，主要分为“内凹”和“外凸”两种类型，如下

该如何实现呢？或者想一下，有哪些 CSS 属性和“弧形”有关？下面介绍 3 种方式，一起看看吧

一、border-radius

通常情况下，我们用border-radius都是这样

div{
  border-radius: 20px;
}

这样表示 4 个角都是圆角，并且是标准的正圆

其实，border-radius还支持斜杠的写法，比如

div{
  border-radius: 20px / 10px;
}

这表示，圆角是一个x半径为20px，y半径为10px的椭圆，如下

放大来看，其实是这样的

进一步，我们将x半径设置成50%，这样就能得到一个完整的弧形了

div{
  border-radius: 50% / 20px;
}

效果如下

这样就得到了“外凸”的弧形了，是不是很容易？

至于“内凹”弧形，单纯的border-radius表示无能为力，可以看接下来的方式

二、伪元素+border-radius

这个其实大多数同学都能想到的方式，一个矩形和一个椭圆组合起来，不就是一个弧形卡片了吗？原理非常简单

用代码实现就是

div{
  position: relative;
}
div::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 20px;
  border-radius: 100%;
  background: inherit; /* 继承父级背景 */
  bottom: 0;
  left: 50%;
  transform: translate(-50%,50%);
}

效果如下（虚线表示伪元素的边缘）

用伪元素的好处是，可以随意控制弧度的大小和位置，这个是border-radius所不能比的

通过overflow:hidden裁剪多余部分，可以得到一个边缘比较“锋利”的弧形，如下所示

另外，用伪元素还能实现“内凹”的效果，不过这需要反过来思考，什么意思呢？之前是给伪元素加的背景，现在需要加在伪元素的外围，这里用box-shadow实现，原理如下

用代码实现就是

div{
  background: none;
  overflow: hidden;
}
div::after{
  content: '';
  background: none;
  box-shadow: 0 0 0 9999vh #FFE8A3; /*足够大的阴影*/
  z-index: -1;
}

效果如下（虚线表示伪元素的边缘）

三、径向渐变

提到圆弧，还可以想到径向渐变，没错，这里通过径向渐变也能轻易实现弧形卡片效果。

先来看“外凸”的，其实思路和伪元素一样，先拆分，一个椭圆和一个矩形，对应的就是径向渐变（radial-gradient）和线性渐变(linear-gradient)，如下

用代码实现就是

div{
  background: 
    radial-gradient(closest-side, #9747FF 100%,transparent 0) center bottom/100% 20px no-repeat,
    linear-gradient(#FFE8A3, #FFE8A3) 0 0/100% calc(100% - 10px) no-repeat;
}

效果如下（紫色部分是径向渐变）

再来看“内凹”的弧形，其实也和伪元素思路类似，只不过这里需要绘制一个足够大的渐变，从透明到纯色的径向渐变，示意如下

调整好渐变中心点，用代码实现就是

div{
  background: radial-gradient(50% 10px at center bottom, transparent 100%,#FFE8A3 0) center bottom;
}

效果如下（全部都是径向渐变绘制）

当然你也可以随意改变径向的弧度和大小，来实现各种不同的效果。

以上所有demo都可以查看以下在线链接

• CSS radius layout (codepen.io)

四、优缺点总结

以上就是本文的全部内容了，共介绍了 3 种不同的方式，下面总结一下各自优缺点

1. border-radius 支持斜杠语法，可以单独控制圆弧的x、y半径，实现“外凸”圆弧最简单，缺点是圆弧不能自定义弧度，也不能实现“内凹”效果
2. 伪元素最符合常规思维，可以解决以上问题，缺点是需要占用伪元素，略微麻烦
3. 渐变实现和伪元素拼接思路类似，缺点是语法复杂，需要熟练掌握渐变语法

作者：XboxYan
链接：https://juejin.cn/post/7308434314777788426