Question

我只是想知道是否有办法在div中创建一个带有“border”的div。我的意思是：我有一个200px的div，我希望边框在200像素内，不超过。

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

我想要这个：

circle inside-borded

这是我的代码：

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 example

Answer 2

虽然盒子阴影很可能是最好的方式，但人们似乎忘记了问题要求边框不超过200px。为了实际实现这一点，您可以在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;
}

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

Here's an JSFiddle with the result

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 example

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

Answer 5

我想你可以在圆圈中添加另一个课程。

我已经为你做了这件事。

我不认为你可以在圆形边框上添加填充（不要引用我的内容），但是我在大约30秒内完成了小提琴。

.scirle {see fiddle}

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

Answer 6

问题是边界占用屏幕房地产是否喜欢。

如果一个1px边框在100px元素上，即使我们可以让它出现在里面，那个元素现在只有98px。但实际上我们所坚持的是100px元素，实际上是由外部边界引起的102px。边框在最新的Chrome中似乎没有对边框做任何事情 - 它们总是出现在外面。

解决此问题的一种简单方法是使用绝对定位的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中设置边框

6 个答案: