轮廓半径？
轮廓半径？
提问于 2011-03-23 00:01:36
有没有办法在类似于border-radius的div元素的轮廓上获得圆角
回答 17
Stack Overflow用户
发布于 2011-07-25 09:17:24
现在是老问题了，但这可能与有类似问题的人相关。我有一个四舍五入的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">
Stack Overflow用户
发布于 2012-07-11 14:40:26
我通常使用:after伪元素完成此操作：
当然，这取决于使用情况，此方法允许控制单个边框，而不是使用硬阴影方法。
您还可以设置-1px偏移，并再次使用背景线性渐变(无边界)来获得不同的效果。
body {
margin: 20px;
}
a {
background: #999;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
color: #fff;
position: relative;
border: 2px solid #000;
}
a:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;
border: 2px solid #ccc;
}<a href="#">Button</a>
Stack Overflow用户
发布于 2011-12-11 19:56:55
与上面的Lea Hayes类似，但我是这样做的：
div {
background: #999;
height: 100px;
width: 200px;
border: #999 solid 1px;
border-radius: 10px;
margin: 15px;
box-shadow: 0px 0px 0px 1px #fff inset;
}<div></div>
不需要嵌套DIVs或jQuery，尽管为了简洁，我省略了一些CSS的-moz和-webkit变体。你可以看到上面的结果
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5394116
复制相关文章
相似问题