css3实现边框圆角内凹效果
我们知道在边框的四个角实现圆角可以用 border-radius 实现, 如果在边框中心实现边框的内凹效果呢?效果如下图:要实现上图的效果可以分为五个步骤:用一个 div 作为大容器, 设置 1px 的边框及圆角利用伪元素 ::before, ::after 创建两个边框 1px 且边框颜色同大容器的圆, 圆的背景色同该模块的背景色(障眼法)子绝父相, 将两个圆分别定位在左右两边将伪元素的其中两条边设置为透明(同三角形的做法)通过 transform: rotate() 设置合适的旋转角度
原创
2020-07-22 22:56:37 ·
6462 阅读 ·
1 评论