轮廓半径？ [英] Outline radius?

问题描述

无论如何， div 元素的大纲上有圆角，类似于 border-radius ？

Is there anyway of getting rounded corners on the outline of a div element, similar to border-radius?

推荐答案

现在的问题，但这可能与有类似问题的人有关。我有一个圆形 border 的输入字段，并想要改变焦点轮廓的颜色。我不能驯服可怕的方块 outline 到输入控件。

Old question now, but this might be relevant for somebody with a similar issue. I had an input field with rounded border and wanted to change colour of focus outline. I couldn't tame the horrid square outline to the input control.

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

So instead, I used box-shadow. I actually preferred the smooth look of the shadow, but the shadow can be hardened to simulate a rounded outline:

/* Smooth outline with box-shadow: */
input[type=text]:focus {
    box-shadow: 0 0 3pt 2pt red;
}

/* Hard "outline" with box-shadow: */
input[type=text]:focus {
    box-shadow: 0 0 0 2pt red;
}

这篇关于轮廓半径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！