css - 添加边框并保留已经存在的半径

Question

我有一个有半径的盒子 - 我想给它应用边框，但是当我这样做时，“内部”盒子又变回方形边缘，这可能吗？

CSS

.box {
width:100px;
height:50px;
background:red;
border-radius:6px;
margin:20px;
}

.box2 {
width:100px;
height:50px;
background:red;
border-radius:6px;
margin:20px;
border:5px solid #ccc;
}

HTML

<div class="box"></div>
<div class="box2"></div>

如您所见，第二个框有边框，但我也想保留内半径。

在这里 fiddle :CSS border Fiddle

Answer 1

边框太厚，其内半径无法明显变圆。如果您想看到内 Angular 变圆，则必须增加第二个框的 border-radius。

您可以通过获取第一个框的 border-radius 并添加第二个框的 border-width 来让您的第二个框具有与第一个框相同的圆 Angular .所以对于 6px 的内半径(从你的第一个盒子开始)和 border-width: 5px，你有 border-radius: 11px第二个盒子。

Updated fiddle