Html 如何在div内设置边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16897787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I setup a border inside the div
提问by pwnHyman
I was just wondering if there's a way to create a div with the "border" inside the div. What I mean is: I have a div of 200px for example and I want the border to be inside that 200 pixels, without exceeding.
我只是想知道是否有办法在 div 内创建一个带有“边框”的 div。我的意思是：例如，我有一个 200 像素的 div，我希望边框在 200 像素内，但不超过。
I need to achieve the effect of a div with a border not on the edge of the shape, but 5px more inside. An image can talk more than hundreds words
我需要实现一个 div 的效果，边框不是在形状的边缘，而是在里面多 5px。一张图片可以说数百个字
I want this:
我要这个：
Here is my code:
这是我的代码：
The CSS:
CSS：
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid blue;
}
Padding property is expanding the whole div including the border.
Padding 属性正在扩展整个 div，包括边框。
How can I achieve that effect using only css? is it possible?
如何仅使用 css 实现这种效果？是否可以？
回答by j08691
You can do this using the CSS3 property box-shadow. Add the following to your CSS:
您可以使用 CSS3 属性box-shadow来做到这一点。将以下内容添加到您的 CSS：
box-shadow: 0px 0px 0px 5px #f00;
回答by Daniel Perván
While box-shadow is most likely the best way to go, people seem to forget that the question required that the border didn't exceed 200px. In order to actually achieve this you can use the insetparameter on the box-shadow attribute (which will make an inner shadow).
虽然 box-shadow 很可能是最好的方法，但人们似乎忘记了要求边框不超过 200px 的问题。为了实际实现这一点，您可以使用insetbox-shadow 属性上的参数（这将产生内部阴影）。
You will also need to change the box-sizingto border-boxsuch that the size is proportional to the border and not the content.
你也需要改变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;
}
回答by Dishan TD
<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;
}
Here's an JSFiddle with the result
回答by James Donnelly
You can't place a border within an element, however you can use box-shadowto give that effect:
您不能在元素内放置边框，但是您可以使用它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 */
}
Do note though that this is a CSS3 style property and isn't supported on all browsers. You may also need to use vendor-prefixes on some browsers (-webkit, -moz, etc). Check http://caniuse.com/#search=box-shadowfor support.
请注意，这是一个 CSS3 样式属性，并非所有浏览器都支持。您可能还需要在某些浏览器（使用供应商前缀-webkit，-moz等等）。检查http://caniuse.com/#search=box-shadow以获得支持。
回答by Ben
I suppose you could add another class to the circle.
我想你可以在圆圈中添加另一个类。
I have done this for you.
我已经为你做了这件事。
I dont think you can add a padding to a rounded border (dont quote me on that), but I did the fiddle in about 30 seconds.
我不认为你可以在圆形边框上添加填充（不要引用我的话），但我在大约 30 秒内完成了小提琴。
.scirle {see fiddle}
回答by rorymorris
The problem is a border takes up screen real estate whether we like it or not.
问题是无论我们喜欢与否，边框都会占用屏幕空间。
If a 1px border is on 100px element, even if we could get it to appear inside, that element would now only be 98px inside. But what we are stuck with in reality is a 100px element that's actually 102px caused by the borders on the outside. Border-box doesn't seem to do anything to borders in latest Chrome - they always appear on the outside.
如果 1px 边框位于 100px 元素上，即使我们可以让它出现在内部，该元素现在也只有 98px 内部。但是我们在现实中被困住的是一个 100px 的元素，它实际上是由外部边框引起的 102px。Border-box 在最新的 Chrome 中似乎对边框没有任何作用——它们总是出现在外面。
An easy way to solve this is using an absolutely positioned CSS :afteror :beforeelement, this basically means no screen space is lost by the border. See example:
解决这个问题的一个简单方法是使用绝对定位的 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); }
