在某移动端看到了个布局,一个轮播图被一个内凹圆形盖住,想了半天内凹圆的样式,大概如下图
实现方法:
- html部分:
<body>
<div class="radius"></div>
</body>
- css部分:
<style>
* {
margin: 0;
padding: 0;
}
body{
background-color: turquoise;
}
.radius {
width: 200px;
height: 300px;
margin: 100px auto;
/* 用到了渐变 第一个值是圆形的大小(200px) 第二个值是左右移动(100px,由于盒子是200宽,100px正好在中间) 第三个值是上下移动 */
background-image: radial-gradient(200px at 100px -10px, transparent 100%, #4169E1 0px);
}
</style>
来源：CSDN
作者：A1?
链接：https://blog.csdn.net/weixin_45888412/article/details/103464991