如何在div内设置边框？

Question

我在想是否有办法创建一个带有“border”的div，在该div内部。我的意思是：我有一个200像素的div，我希望边框在这200个像素内部，而不是超出范围。

我需要实现一个div带有边框，但不是在形状的边缘，而是再往里5px的效果；如下图所示：

以下是我的代码：

http://jsfiddle.net/hpLYD/1/

CSS：

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: red;
    border: 3px solid blue;
}

填充属性会扩展整个包括边框在内的div。

我该如何仅使用CSS实现这种效果？是否可能？

- pwnjack

---

注意：border: dashed/dotted; 在 Firefox 中不起作用，无论如何都呈实线渲染（当应用了 border-radius 时）。 - pwnjack

Answer 1

你可以使用CSS3的属性box-shadow来实现。添加以下代码到你的CSS中：

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

jsFiddle例子

- j08691

---

谢谢，这正是我想要的。然而，阴影超出了圆形的200像素，但是通过该属性，我可以轻松将其减小到195像素，并拥有3像素的阴影和2像素的边框来保持尺寸内！谢谢。 - pwnjack

匿名懦夫的投票者能否解释一下问题？ - j08691

Answer 2

虽然box-shadow很可能是最好的选择，但人们似乎忘记了问题要求边框不超过200px。为了实现这一点，您可以在box-shadow属性上使用inset参数（它将创建一个内部阴影）。

您还需要将box-sizing更改为border-box，以使大小与边框成比例而不是内容。

这里是带有结果的JSFiddle

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: red;
    border: 3px solid red;
    box-shadow: 0px 0px 0px 5px blue inset;
    box-sizing: border-box;
}

- Daniel Perván

---

感谢介绍box-sizing属性，这对于在前缀尺寸中获得该效果非常有用。 - pwnjack

Answer 3

<div class="mydiv"></div>

.mydiv{
  position:relative;
  height:150px;
  width:200px;
  background:#f00;
}
.mydiv:before{
  position:absolute;
  content:'';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left:10px;
  right: 10px;
  border:1px solid #daa521;
}

这是一个显示结果的JSFiddle

- Dishan TD

Answer 4

你不能在元素内部放置边框，但是你可以使用box-shadow来实现这种效果:

.circle {
    border-radius: 50%;
    width: 190px;
    height: 190px;
    background: red;
    border: 3px solid blue;
    box-shadow:  0px 0px 0px 10px red; /* 10px box-shadow */
}

JSFiddle示例。

需要注意的是，这是一个CSS3样式属性，并不被所有浏览器支持。您可能还需要在某些浏览器上使用供应商前缀（-webkit，-moz等）。请查看http://caniuse.com/#search=box-shadow以获取支持情况。

- James Donnelly

---

我知道供应商前缀，但为了保持简单，我在示例中没有使用它们。不过还是感谢你指明这一点，并分享“caniuse”网站，非常有用! ;) - pwnjack

我提到的更多是关于box-shadow属性，而不是你的示例代码。具体来说是-webkit-box-shadow和-moz-box-shadow。 - James Donnelly

Answer 5

我想你可以在圆形中再添加一个类。

我已经为您完成了此操作。

我认为您无法向圆角边框添加填充（不要引用我的话），但是我大约在30秒内完成了这个小示例。

.scirle {see fiddle}

http://jsfiddle.net/hpLYD/7/embedded/result/

- Ben

Answer 6

问题在于边框无论我们是否喜欢它，都会占用屏幕空间。

如果一个100像素的元素有1像素的边框，即使我们可以让它显示在内部，该元素现在也只有98像素。但实际上我们所面临的是一个100像素的元素，由于外部边框而实际上是102像素。在最新的Chrome中，border-box似乎对边框没有任何作用 - 它们总是出现在外部。

解决这个问题的简单方法是使用绝对定位的CSS :after或:before元素，这基本上意味着边框不会浪费屏幕空间。请参见以下示例：

.border{ position: relative; }
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); }

- rorymorris