小兔网

css如何实现圆角内凹效果

实现思路:

(推荐教程: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>

实现效果:

css如何实现圆角内凹效果

以上就是css如何实现圆角内凹效果的知识。速戳>>知识兔学习精品课!