11

我只是想知道是否有一种方法可以在 div 内创建一个带有“边框”的 div。我的意思是：例如，我有一个 200 像素的 div，我希望边框在 200 像素之内，但不超过。

我需要实现一个 div 的效果，它的边框不在形状的边缘，而是在里面多 5px。一张图片可以说上百字

我要这个：

圈内圈

这是我的代码：

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

CSS：

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

填充属性正在扩展包括边框在内的整个 div。

如何仅使用 css 实现该效果？是否可以？

4

6 回答 6

18

您可以使用 CSS3 属性box-shadow来做到这一点。将以下内容添加到您的 CSS 中：

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

jsFiddle 示例

于 2013-06-03T13:27:20.897 回答
6

虽然 box-shadow 很可能是最好的方法，但人们似乎忘记了问题要求边框不超过 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;
}
于 2013-10-30T09:45:10.917 回答
2 
<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;
}

这是一个带有结果的 JSFiddle

在此处输入图像描述

于 2016-04-22T13:28:19.533 回答
1

您不能在元素内放置边框，但是您可以使用它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 示例。

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

于 2013-06-03T13:27:53.173 回答
0

我想您可以在圈子中添加另一个类。

我已经为你做了这件事。

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

.scirle {see fiddle}

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

于 2013-06-03T13:36:34.913 回答
0

问题是无论我们喜欢与否，边框都会占用屏幕空间。

如果一个 1px 的边框在 100px 的元素上，即使我们可以让它出现在里面，那个元素现在也只有 98px 的里面。但我们在现实中遇到的是一个 100px 的元素，它实际上是由外部边框引起的 102px。Border-box 似乎对最新 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); }
于 2014-11-12T22:11:41.727 回答