css实现内凹的圆角
圆角大家都知道用css的border-radius属性可以实现，那么实现反向的内凹的圆角呢？
通过径向渐变
MDN文档：https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient 径向渐变实现：
<style>
.test{
width: 200px;
height: 40px;
background:radial-gradient(40px at right bottom,transparent 50%,#1889F6 50%);
}
<div class="test">
</div>
</style>
这个是最好的方案，内凹的半圆可以做成透明背景，实现类似mask的遮罩的效果。
元素覆盖
通过后面的圆角元素覆盖在上面，实现视觉上的效果，这个好实现，但是增加了复杂性。没法实现mask遮罩的效果。
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
.cro{
width: 100px;
height: 100px;
border: 1px solid #58C4E6;
position: relative;
}
.cro_left_top,.cro_right_top,.cro_left_bottom,.cro_right_bottom{
position: absolute;
width: 20px;
height: 20px;
border: 1px solid #fff;
z-index: 1;
background: #fff;
}
.cro_left_top{
top: -1px;
left: -1px;
border-radius:0px 0px 20px 0px;
border-bottom: 1px solid #58C4E6;
border-right: 1px solid #58C4E6;
}
.cro_right_top{
top: -1px;
right: -1px;
border-radius:0px 0px 0px 20px;
border-bottom: 1px solid #58C4E6;
border-left: 1px solid #58C4E6;
}
.cro_left_bottom{
left: -1px;
bottom: -1px;
border-radius:0px 20px 0px 0px;
border-top: 1px solid #58C4E6;
border-right: 1px solid #58C4E6;
}
.cro_right_bottom{
right: -1px;
bottom: -1px;
border-radius:20px 0px 0px 0px;
border-top: 1px solid #58C4E6;
border-left: 1px solid #58C4E6;
}
</style>
</head>
<body>
<div class="cro">
<div class="cro_left_top"></div>
<div class="cro_right_top"></div>
<div class="cro_left_bottom"></div>
<div class="cro_right_bottom"></div>
</div>
</body>
</html>
css的mask方案
CSS mask遮罩属性的历史非常久远了，远到比CSS3 border-radius等属性还要久远，最早是出现在Safari浏览器上的，差不多可以追溯到09年。
不过那个时候，遮罩只能作为实验性的属性，做一些特效使用。毕竟那个年代还是IE浏览器的时代，属性虽好，但价值有限。
但是如今情况却大有变化，除了IE和Edge浏览器不支持，Firefox，Chrome以及移动端等都已经全线支持，其实际应用价值已不可同日而语。尤其Firefox浏览器，从版本55开始，已经全面支持了CSS3 mask属性。并且mask属性规范已经进入候选推荐规范之列，会说以后进入既定规范标准已经是板上钉钉的事情，大家可以放心学习，将来必有用处。
在过去，CSS mask属性在使用的时候就是mask: xxx，但是现在随着这个属性的规范化，mask属性实际上已经成为了诸多mask-*的缩写，这和background, border性质是一样的。
具体是哪些属性的缩写呢，可以参见下面的列表：
mask-image
mask-mode
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
mask-type
mask-composite
详见MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
示例：
.mask-image {
width: 250px; height: 187.5px;
-webkit-mask-image: url(loading.png);
mask-image: url(loading.png);
}
<img src="ps1.jpg" class="mask-image" />
从上面这个最基本的案例，我们可以看出，所谓遮罩，就是原始图片只显示遮罩图片非透明的部分。例如本案例中，loading圆环有颜色部分就是外面一圈圆环，于是最终我们看到效果是原始图片，只露出了一个一个的圈圈环。并且半透明区域也准确遮罩显示了。 因此，我们很少使用jpg图片来作为遮罩图片的，因为jpg图片一定是完全不透明的，最终的效果就是原图什么也看不到。
所以找个内凹的半圆形svg，然后做成mask也可以实现。
box-shadow实现上面有阴影
纵向偏移用负值即可，为散射半径的即可。
box-shadow: 0 -5px 0 10px rgba(0,0,0,0.3);