css怎样实现圆角内凹结果
发布时间:09/01 来源:未知 浏览:
关键词:
实现思绪:
(引荐教程: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怎样实现圆角内凹结果的具体内容,更多请关注百分百源码网其它相关文章!