css如何实现圆角内凹效果

互联网 20-7-14

实现思路：

（推荐教程：css快速入门）

两个并排的div，在第二个div内定义一个2倍宽高的名为item，对item进行设置border-radius: 50%，再对其进行绝对定位。

代码实现：

<head>   <meta charset="UTF-8" />   <title>Title</title>   <style>     .box {       width: 50px;       height: 50px;       overflow: hidden;       background: #655;       text-align: center;       position: relative;       float: left;     }     .item {       width: 100px;       height: 100px;       background: #fff;       border-radius: 50%;       position: absolute;       top: -50px;       left: 0;     }   </style> </head> <body>   <div class="box"></div>   <div class="box">     <div class="item"></div>   </div> </body> </html>