如何在div中设置边框?

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的方法，我的意思是:我有一个200px的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

我需要达到一个分区的效果，边界不是在形状的边缘，而是5px的内部。一个图像可以超过数百个单词。

I want this:

我想要这样的:

Here is my code:

这是我的代码:

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

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

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.

填充属性扩展了整个div，包括边框。

How can I achieve that effect using only css? is it possible?

如何使用css实现这一效果?是可能的吗?

6 个解决方案

#1

You can do this using the CSS3 property box-shadow. Add the following to your CSS:

您可以使用CSS3属性框阴影来实现这一点。在CSS中添加以下内容:

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

jsFiddle example

jsFiddle例子

#2

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 inset parameter on the box-shadow attribute (which will make an inner shadow).

虽然box-shadow最有可能是最好的方式，但人们似乎忘记了边界不超过200px的问题。为了实现这一点，您可以使用box-shadow属性的inset参数(这将产生一个内阴影)。

You will also need to change the box-sizing to border-boxsuch that the size is proportional to the border and not the content.

您还需要将箱体大小更改为边框，这样大小与边框成比例，而不是内容。

Here's an JSFiddle with the result

这是一个带有结果的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;
}

#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;
}

Here's an JSFiddle with the result

这是一个带有结果的JSFiddle。

#4

You can't place a border within an element, however you can use box-shadow to 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 */
}

JSFiddle example.

JSFiddle例子。

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-shadow for support.

请注意，这是一个CSS3样式属性，并且不支持所有浏览器。您可能还需要在一些浏览器上使用vendor-prefixes (-webkit， -moz，等等)。检查http://caniuse.com/搜索=不必寻求支持。

#5

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}

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

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

#6

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。在最新的Chrome浏览器中，边界框似乎没有任何作用——它们总是出现在外部。

An easy way to solve this is using an absolutely positioned CSS :after or :before element, this basically means no screen space is lost by the border. See example:

解决这个问题的一个简单方法是使用一个绝对定位的CSS:在元素之前或之前，这基本上意味着没有屏幕空间被边界丢失。看到的例子:

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