css如何实现圆角内凹效果
程序员文章站
2022-03-06 23:42:46
...
实现思路:
(推荐教程: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如何实现圆角内凹效果的详细内容,更多请关注其它相关文章!
上一篇: vue3异步组件有什么用
下一篇: 如何解决php文件上传乱码问题
推荐阅读
-
bootstrap左侧导航 手风琴效果如何实现_html/css_WEB-ITnose
-
如何利用CSS实现图片的透明效果_html/css_WEB-ITnose
-
请问如何实现table的外框和内框线的粗度不同??_html/css_WEB-ITnose
-
使用box-shadow属性实现圆角效果代码实例_html/css_WEB-ITnose
-
css3如何实现过渡动画的效果?css3过渡效果的实现方法
-
css3图片旋转如何实现?css3实现图片旋转动画效果的方法
-
CSS3实现内凹圆角的实例代码
-
CSS3实现DIV圆角效果完整代码
-
如何利用CSS3制作3D效果文字具体实现样式
-
CSS3实现内凹圆角的实例代码