css3实现边框圆角内凹效果

更新时间:2023-04-03 19:02:35 阅读：评论：0

我们知道在边框的四个角实现圆角可以用 border-radius 实现, 如果在边框中心实现边框的内凹效果呢?
效果如下图:

要实现上图的效果可以分为五个步骤:

用一个 div 作为大容器, 设置 1px 的边框及圆角利用伪元素 ::before, ::after 创建两个边框 1px 且边框颜色同大容器的圆, 圆的背景色同该模块的背景色(障眼法)子绝父相, 将两个圆分别定位在左右两边将伪元素的其中两条边设置为透明(同三角形的做法)通过 transform: rotate() 设置合适的旋转角度

驾照考题源代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta chart包头医学="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>圆角边框的实现方法</title>    <style> 蛰伏div { position: relative; width: 300px; height: 150px; border: 1px solid #f60; margin: 100px auto; border-radius: 5px; } // 添加伪元素 div::before, div::after { position: absolute; top: 50%; margin-top: -5px; content: ''; width: 9px; height: 9px; background-color: #fff; border: 1px solid #f60; border-left-color: transparent; border雾霾如何治理-bottom-color: transparent; border-radius: 50%; } div::before { left: -6px; transform: rotate(45deg); } div::after { right: -6px; transform: rotate(-135deg); } </style></head><body>    <div></div&红故事gt;</body></html>