背景

最近在项目上遇到一个前端的票据样式需求，具体样式如下图：

我的思路是先画一个背景为白色的div,然后再画 2 个绝对定位的圆形，让圆形遮住底部的长方形div。中间那条虚线也不能用border来画，这个我在网上搜了一下，发现了直线渐变的写法、

写完代码后，我觉得没什么问题，但是组内比较资深的前端提了几个问题：

1. 这样写圆是盖在正方形div上面的，还能支持修改整个页面的背景色吗？
2. 圆是绝对定位，但是text的内容高度很可能是动态修改的，那么对应也要修改圆的top值，很麻烦。
3. （这个问题是我自己发现的）我这种写法只能给整个白色盒子加阴影。涉及到圆的地方阴影不好加。

最终写法

采用径向渐变属性radial-gradient 分别画 4 个 1/4 圆，拼成 2 个半圆，这种写法可以通过filter的方法加阴影效果。

知识点

1. filter
2. linear-gradient
3. radial-gradient

filter

该属性可以将模糊或颜色偏移等图形效果应用于元素，通常用于调整图像、背景和边框的渲染。

我认为这个属性最大的特点是可以对不规则的图片进行修改。

可以通过下面的语句给盒子加shadow：

filter: drop-shadow(16px 16px 20px blue);

此外，这个属性还可以用来模糊、增加亮度、增加透明度等等，这些功能还可以组合使用。

linear-gradient

这个css函数创建一个图像，该图像由两种或多种颜色之间沿直线的渐进过渡组成。 其格式如下：

<linear-gradient()> = 
  linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )  

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

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#  

<linear-color-stop> = 
  <color>               &&
  <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

简单解析一下上面的格式，linear-gradient分为两部分。

前者表示渐变的方向，可以使用偏转角度的度数或者to+方向，比如 to left这样的写法。

后者表示颜色的列表，可以输入渐变对应的颜色。

按照这个卡片的样式，如果希望显示中间的分割线，那么只需要颜色列表前一半是灰色，后一半是透明就可以了。

radial-gradient

这个css函数创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成。其格式如下：

<radial-gradient()> = 
  radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )  

<size> = 
  <extent-keyword>              |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | start | end | <length-percentage> ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ]  |
  [ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#  

<extent-keyword> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

<linear-color-stop> = 
  <color>               &&
  <length-percentage>?  

<linear-color-hint> = 
  <length-percentage> 

通过径向渐变给整个白色的块加一个background，让圆变成透明色，就可以达到图中的效果。