CSS3 | 径向渐变做缺角效果-广州芦苇科技

效果

话不多说直接上设计稿

不仔细的前端开发者稍不注意就会忽略一些细节，尤其是两个缺角效果就不会完美的实现。

圆角实现

这个页面的主体是两个圆角的盒子组成，有些图方便或者不仔细的前端开发者可能就直接两个盒子贴合。

为了方便，我们不实现设计稿中的全部细节，只将其中最重要的部分提出来用以说明问题，html结构如下：

<div class="container">
  <div class="banner">banner部分</div>
  <main>主体</main>
</div>

接下来我们分析一下圆角实现的问题：

.container {
  display: inline-block;

  border: 2px solid #000;
  padding: 30px;

  font-size: 40px;
  text-align: center;

}
.banner {
  border-bottom: 1px dashed #ddd;
  border-radius: 5px 5px 10px 10px;
  box-shadow: 0px 4px 30px 0px    rgba(173, 173, 173, 0.15);
  width: 350px;
  height: 150px;

  background-color:rgba(234, 169, 84, .1);
}
main {
  border-radius: 10px 10px 5px 5px;
  box-shadow: 0px 4px 30px 0px    rgba(173, 173, 173, 0.15);
  width: 350px;
  min-height: 400px;

  background-color: #fff;
}

圆角实现非常简单，但是缺陷显而易见，缺角凹陷的方向不对，对于追求细节的客户是绝对接收不了的。圆角实现效果图

遮罩缺角

相信大部分人应该会想到，用元素去做一个白底遮罩。

只用稍微修改banner部分

.banner {
  position: relative;

  border-bottom: 1px dashed #ddd;
  border-radius: 5px 5px 0 0;
  box-shadow: 0px 4px 30px 0px    rgba(173, 173, 173, 0.15);
  width: 350px;
  height: 150px;

  background-color:rgba(234, 169, 84, .1);
}

.banner:before {
  position: absolute;
  left: -10px;
  bottom: -10px;

  border-radius: 50%;
  width: 20px;
  height: 20px;

  background-color: #fff;

  content: '';
}
.banner:after {
  position: absolute;
  right: -10px;
  bottom: -10px;

  border-radius: 50%;
  width: 20px;
  height: 20px;

  background-color: #fff;

  content: '';
}

以下为效果图：遮罩实现1

径向渐变

增加新元素的做法可能有些开发者并不喜欢，并且如果盒子的shadow再明显一点很容易看出两个圆形遮罩的存在，这样就需要对两个盒子使用overflow: hidden，如果盒子需要超出做其他效果，就会引起矛盾了，即使不矛盾也共计需要四个元素或伪元素做遮罩。如果不喜欢上面那种取巧的方式，那下面这种方式就值得一试了。

开始之前先简单介绍一下径向渐变

标准写法：radial-gradient(center, shape size, start-color, ..., last-color)。
CSS3属性，所以使用前和书写时都要考虑兼容性。
第一个参数定义位置，默认为center。
第二个参数定义形状和大小，默认椭圆ellipse 最远角落farthest-corner。
剩余参数定义颜色列表。

一个简单的径向渐变例子

<style>
div {
  width: 200px;
  height: 200px;

  background: radial-gradient(center, circle, farthest-corner, red, orange, yellow, blue, green);
}
</style>
<div></div>

center表示渐变的中心在元素中心，circle表示渐变的形状为圆形,farthest-corner表示渐变的范围从中心到最远的元素角落，最后是从内到外的颜色渐变列表。以下为效果图：

认识渐变

现在要实现设计稿的效果要解决两个问题：

渐变色的取值。
多个渐变的叠加。

直接上代码，为了看出渐变内的阴影效果，加大了box-shadow

.banner {
  border-radius: 5px 5px 0 0;
  box-shadow: 0px 4px 30px 0px    rgba(173, 173, 173, 0.3);
  width: 350px;
  height: 150px;

  background-color:rgba(234, 169, 84, .2);

  background-image: -webkit-radial-gradient(
    0 100%,
    circle farthest-corner,        
    #f2f2f2 10px,
    transparent 10px
  ),
    -webkit-radial-gradient(
    100% 100%,
    circle farthest-corner,
    #f2f2f2 10px,
    transparent 10px
  );
  background-image: radial-gradient(
    0 100%,
    circle farthest-corner,
  #f2f2f2 10px,
    transparent 10px
  ),
    radial-gradient(
    100% 100%,
  #f2f2f2 10px,
    transparent 10px
  );
}
main {
  border-radius: 0 0 5px 5px;
  box-shadow: 0px 4px 30px 0px    rgba(173, 173, 173, 0.3);
  width: 350px;
  min-height: 400px;

  background-image: -webkit-radial-gradient(
    0 0,
    circle farthest-corner,
    #f2f2f2 10px,
    transparent 10px
  ),
    -webkit-radial-gradient(
    100% 0,
    circle farthest-corner,
    #f2f2f2 10px,
    transparent 10px
  );
  background-image: radial-gradient(
    0 0,
    circle farthest-corner,
    #f2f2f2 10px,
    transparent 10px
  ),
    radial-gradient(
    100% 0,
    #f2f2f2 10px,
    transparent 10px
  );
}

这实际会引起一个新问题，分割线需要用另一内部元素实现，否则分割线的长度不对，解决好这个问题后的效果图：渐变实现的好处还在于，能在径向渐变时直接设置颜色列表，在缺角内模拟盒子阴影效果。颜色列表直接影响到缺角内的阴影是否协调，必须与盒子的box-shadow融为一体，从而达到以假乱真的效果。

使用径向渐变还有一个小技巧：可以用background-size设置大小，上个例子可以认为是两个渐变叠加在一起了，只是重叠的部分被设置为了transparent透明，如果你遇到一个需求不能设置将重叠部分设置为透明，那么可以像设置背景图一样设置背景渐变。每个background-***中的值都可以用,分隔，达到设置多个背景渐变不同属性的效果。

    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: 0 100%,100% 100%;

缺角效果可以用多种方式实现，带box-shadow的缺角并不好做，用径向渐变可以模拟shadow效果，颜色列表的规划至关重要。学会了径向渐变可以做很多复杂的效果，再也不用担心设计大佬忘记切图了。

作者简介：叶茂，芦苇科技web前端开发工程师，代表作品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究。一起并肩作战： yemao@talkmoney.cn 访问 www.talkmoney.cn 了解更多