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>

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

小提琴在这里：CSS边框小提琴

Answer 1

边框太厚，其内半径无法明显变圆。border-radius如果您想看到圆角的内角，您将不得不增加第二个框。

border-radius您可以通过获取第一个框并将第二个框添加到其中，使您的第二个框具有与您的第一个框相同的圆角border-width。所以对于6px（从你的第一个盒子）的内半径border-width: 5px，你border-radius: 11px在第二个盒子上。

更新的小提琴

Answer 2

You could use box-shadow to get the desired effect:

box-shadow:0 0 0 5px #ccc;

See in this jsFiddle

Answer 3

You could do it like this to have the effect of a completely rounded border:

CSS:

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

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

.boxinbox {
    background:red;
    border-radius:6px;
    width:100%;
    height:100%;
    }

HTML:

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