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 border Fiddle

Answer 1

边框太厚，内半径看不到圆角。如果你想看到内角倒圆，你将不得不增加第二个方框border-radius。

您可以通过获取第一个框border-radius并将第二个框border-width添加到第一个框，让第二个框与第一个框具有相同的圆角。因此，对于6px的内半径（来自您的第一个框）border-width: 5px，您在第二个框上有border-radius: 11px。

Updated fiddle

Answer 2

您可以使用box-shadow来获得所需的效果：

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

请参阅此jsFiddle

Answer 3

你可以这样做，以获得完全圆形边框的效果：

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>

添加边框并保留半径

3 个答案: