Div 元素可以有圆角吗？

Div 元素是否可以容纳圆角轮廓角？

Div 元素缺乏通过 border-radius 属性显式具有圆角轮廓角的能力。此限制源于许多浏览器中围绕可聚焦元素的默认方形轮廓。

替代解决方案：拥抱 Box-Shadow

模拟 div 上圆角轮廓的效果元素，考虑使用 box-shadow。通过策略性地应用具有特定尺寸的盒子阴影，您可以创建圆形轮廓的错觉。

实现：

以下是如何实现平滑的示例使用 box-shadow 绘制轮廓：

<input class="text1">

input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline-color: transparent;
    transition: .1s;
}

.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

要获得更硬的“轮廓”效果，请调整盒子阴影尺寸如下：

.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

以上是Div 元素可以有圆角吗？的详细内容。更多信息请关注PHP中文网其他相关文章！