CSS 应用radial

2021-02-28 11:19 jianzhan

本文将详细介绍怎样应用 css 中的 radial-gradient 完成以下图所示的优惠券款式实际效果:

 

绘图基础款式

最先,大家绘图出优惠券的基础款式,这很简易,就很少说了。

<div class="voucher">
  <div class="left"></div>
  <div class="right">满 100 减 30</div>
</div>

/* scss */
.voucher {
  width: 600px;
  height: 200px;
  display: flex;
  .left {
    width: 30%;
    height: 100%;
    background-color: #f76260;
  }
  .right {
    height: 100%;
    border: 1px solid #ddd;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
  }
}

 

锯齿完成分析

锯齿一部分实际上能够当做是10个以下所示的图象片断拼接起来的。每一个片断的宽为锯齿的半径 6px,高为 20px。因此大家只必须画出该片断,剩余的反复填充就行了。

 
 

大家把锯齿的款式加在 voucher 的伪元素上面就大获全胜了:

&::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 6px;
  left: 0;
  top: 0;
  background-image: radial-gradient(circle at 0px 10px, white 6px, #f76260 6px);
  background-size: 6px 20px;
}

 

这里的关键编码是 background-image: radial-gradient(circle at 0px 10px, white 6px, #f76260 6px); 。它实际上是下面这类写法的简写方法: background-image: radial-gradient(circle at 0px 10px, white 0, white 6px, #f76260 6px, #676260 100%); ,表明从 (0px, 10px) 的部位刚开始开展轴向渐变色,渐变色的样子为圆形,从 0 到 6px 由 white 渐变色成 white ,也便是单色; 6px 到图型边沿由 #f76260 渐变色成 #f76260 ,也是单色。

以便重用大家的锯齿款式编码,大家能够界定1个 scss 的 mixin:

/**
  * 以便完成较为好的实际效果,最好是保证:
  * 1. $height 能够被 $num 整除
  * 2. 2 * $radius < $height / $num
  */
@mixin leftSawtooth($height, $num, $radius, $color, $bgColor) {
  $segmentHeight: $height / $num;
  height: $height;
  &::before {
    content: '';
    position: absolute;
    height: 100%;
    width: $radius;
    left: 0;
    top: 0;
    background-image:
      radial-gradient(circle at 0px $segmentHeight / 2, $bgColor $radius, $color $radius);
    background-size: $radius $segmentHeight;
  }
}

 

这样,用起来就很便捷了:

@include leftSawtooth(600px, 10, 6px, #f76260, white);

 

升級版

升級版的锯齿色调和左侧一部分的情况色调不1致,完成上会一些差别,但是思路還是1致的。

最先還是绘图出基础的款式:

.voucher {
  width: 600px;
  height: 200px;
  margin: 20px auto;
  display: flex;
  position: relative;
  border: 1px solid #ddd;
  .left {
    width: 30%;
    height: 100%;
    border-right: 1px dashed #ddd;
  }

  .right {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
  }
}

随后,绘图锯齿一部分。留意,这里圆的半径是空白一部分5px再加1px的边框,因此情况片断绘图必须附加加1段渐变色:

background-image: radial-gradient(circle at 0px 10px,
  white 5px, /* 圆内的色调是情况色 */
  #ddd 5px,
  #ddd 6px,
  transparent 6px /* 圆外的色调是全透明色 */
);

留意到大家把圆内的色调设定为情况色,圆外的色调设定为全透明色,为何要这样后边会有表明。如今的实际效果离总体目标早已愈来愈近了,但是還是有点进出:

 
 

处理方法是把伪元素往左挪动1个边框尺寸的部位。这样半圆左侧的线会被圆内的色调遮盖,而别的地区由于是全透明色,因此线会保存(这便是为何要把圆内的色调设定为情况色,圆外的色调设定为全透明色的缘故了)。

详细的 mixin 以下所示:

@mixin leftSawtoothBorder($height, $num, $radius, $bgColor, $borderColor, $borderWidth) {
  $segmentHeight: $height / $num;
  $extendedRadius: $radius + $borderWidth;
  height: $height;
  &::before {
    content: '';
    position: absolute;
    height: 100%;
    width: $extendedRadius;
    left: -$borderWidth;
    top: 0;
    background-image: radial-gradient(circle at 0px $segmentHeight / 2,
      $bgColor $radius,
      $borderColor $radius,
      $borderColor $extendedRadius,
      transparent $extendedRadius
    );
    background-size: $extendedRadius $segmentHeight;
  }
}

总结

以上所述是网编给大伙儿详细介绍的CSS 应用radial-gradient 完成优惠券款式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!