我只是想知道是否有一种方法可以在 div 内创建一个带有“边框”的 div。我的意思是：例如，我有一个 200 像素的 div，我希望边框在 200 像素之内，但不能超过。
我需要实现一个div的效果，边框不是在形状的边缘，而是在里面多出5px。一张图片可以说数百个单词
我想要这个：
这是我的代码：
CSS：
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid blue;
}
Padding 属性正在扩展包括边框在内的整个 div。
如何仅使用 css 来实现该效果？可能吗？
【问题讨论】：
border: dashed/dotted; 在 Firefox 中不起作用，无论如何它都会呈现为实心（应用边框半径时）。
问题是无论我们喜欢与否，边框都会占用屏幕空间。
如果 1px 的边框在 100px 的元素上，即使我们可以让它出现在里面，这个元素现在也只有 98px 的里面。但我们在现实中被困住的是一个 100px 的元素，它实际上是由外部边框引起的 102px。在最新的 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); }
【讨论】：
<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;
}
【讨论】：
虽然 box-shadow 很可能是最好的方法，但人们似乎忘记了问题要求边框不超过 200 像素。为了真正实现这一点，您可以在 box-shadow 属性上使用inset 参数（这将产生内部阴影）。
您还需要将box-sizing 更改为border-box，以使大小与边框而不是内容成正比。
Here's an JSFiddle with the result
.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;
}
【讨论】：
我想你可以在圈子中添加另一个类。
我已经为你做了。
我不认为你可以在圆形边框上添加填充（不要引用我的话），但我在大约 30 秒内完成了这项工作。
.scirle {see fiddle}
【讨论】：
您不能在元素内放置边框，但是您可以使用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 */
}
请注意，这是一个 CSS3 样式属性，并非所有浏览器都支持。您可能还需要在某些浏览器上使用供应商前缀（-webkit、-moz 等）。检查http://caniuse.com/#search=box-shadow 以获得支持。
【讨论】：
box-shadow 属性。 -webkit-box-shadow 和 -moz-box-shadow 特别是。
【讨论】：