如何在div中设置边框

Question

我只是想知道是否有办法在div中创建一个带有"边框"的div.我的意思是:我有一个200px的div,我希望边框在200像素内,不超过.

我需要实现div的效果,边框不在形状的边缘,而是在内部多5px.图像可以说超过数百个单词

我要这个:

这是我的代码:

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

CSS:

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

Padding属性正在扩大包括边界在内的整个div.

如何仅使用css实现该效果？可能吗？

Answer 1

您可以使用CSS3属性box-shadow执行此操作.将以下内容添加到CSS中:

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

jsFiddle例子

Answer 2

虽然盒子阴影很可能是最好的方式,但人们似乎忘记了问题要求边框不超过200px.为了实际实现这一点,您可以使用insetbox-shadow属性上的参数(这将产生内部阴影).

你也需要改变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;
}