轮廓半径？

Question

有没有办法在 div 元素的轮廓上获得圆角，类似于 border-radius ？

原文由 Marc Guerin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

现在是老问题，但这可能与有类似问题的人有关。我有一个带圆角的输入字段 border 并且想更改焦点轮廓的颜色。我无法将可怕的方形轮廓驯服到输入控件。

因此，我使用 box-shadow 。我实际上更喜欢阴影的平滑外观，但阴影可以硬化以模拟圆形轮廓：

 input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline: none;
    transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

/* Hard "outline" with box-shadow: */
.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

 <input class="text1">
<br>
<br>
<input type=text class="text2">

原文由 Lea Hayes 发布，翻译遵循 CC BY-SA 4.0 许可协议