如何在 div 内设置边框

Posted

技术标签:

【中文标题】如何在 div 内设置边框【英文标题】:How can I setup a border inside the div 【发布时间】:2013-05-29 15:58:42 【问题描述】:

我只是想知道是否有一种方法可以在 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;

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

如何仅使用 css 来实现该效果?可能吗?

【问题讨论】:

注意:border: dashed/dotted; 在 Firefox 中不起作用,无论如何它都会呈现为实心(应用边框半径时)。 【参考方案1】:

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

如果 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); 

【讨论】:

【参考方案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;

Here's an JSFiddle with the result

【讨论】:

【参考方案3】:

虽然 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;

【讨论】:

感谢您引入 box-sizing 属性,这对于在前缀尺寸中获得该效果非常有用。【参考方案4】:

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

我已经为你做了。

我不认为你可以在圆形边框上添加填充(不要引用我的话),但我在大约 30 秒内完成了这项工作。

.scirle see fiddle

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

【讨论】:

【参考方案5】:

您不能在元素内放置边框,但是您可以使用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 以获得支持。

【讨论】:

我知道供应商前缀我没有在我的示例中使用它们只是为了保持简单,但无论如何感谢它的精确化,并分享那个“caniuse”网站,这非常有用! ;) 我在您的示例代码中更多地提到了 box-shadow 属性。 -webkit-box-shadow-moz-box-shadow 特别是。【参考方案6】:

您可以使用 CSS3 属性 box-shadow 执行此操作。将以下内容添加到您的 CSS:

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

jsFiddle example

【讨论】:

谢谢,这正是我想要的,阴影超过了圆的 200px,但有了这个属性,我可以轻松地将它减小到 195px,并有一个 3px 的阴影和 2px 的边框来保持它在尺寸内!谢谢。 匿名懦夫反对者关心解释问题?

以上是关于如何在 div 内设置边框的主要内容,如果未能解决你的问题,请参考以下文章

CSS如何怎么设置div边框颜色宽度和高度

如何在html的表格中加入边框线

如何将边框图像放在div内[重复]

div加边框不占空间是用的啥属性?

CSS 如何实现让div的四个边框都有阴影的效果?

如何在 CSS 中自动设置段落宽度?