<div class="radial-gradient"></div>
<style>
body{
background-color: #F8F8F8;
}
.radial-gradient {
width: 200px;
height: 100px;
position: relative;
background-image: radial-gradient(circle at left bottom, #F8F8F8,#F8F8F8 10px, transparent 11px),
radial-gradient(circle at right bottom, #F8F8F8, #F8F8F8 10px, transparent 11px);
background-color: red;
}
</style>
代码运行效果:
解释:radial-gradient(circle at left bottom, #fff, #fff 10px, transparent 11px),就是以容器的左下角为原点画圆,半径10px范围内是#fff颜色,半径大于10px范围内都是transparent颜色。