在div边框上的填充

我想在CSS边框上填充填充。把它从里面拉出来，远离边缘。这可能使用CSS（CSS3罚款，WebKit）。在div边框上的填充

这是设计。

Border Example

我通过把一个div一个div里面做，然后给一个边框内股利。我想让标记变得苗条，所以我只想使用一个div。

谢谢。

2010-09-14 floatleft

你应该能够与CSS outline属性做到这一点：

<style> 
.outer { 
     outline: 2px solid #CCC; 
     border: 1px solid #999; 
     background-color: #999; 
     } 
</style> 

<div class="outer"> 
example 
</div>

来源

2010-09-15 16:03:54

完美。我认为有一种方法可以在div上加双边框。感谢您的帮助Edd！ – floatleft 2010-09-16 13:19:10

不，这是不可能的。填充，边距和边框都是元素的所有部分，您不能给出边框填充或边距边框。

也许如果您发布了您想要做的事情的例子，我们可以想出替代解决方案？

-update- 看看你的例子，恐怕还是不可能的，至少不是只有一个div。我不是divitis的粉丝，但额外的div可能是在这种情况下最好的选择。

来源

2010-09-14 15:28:07

边框周围的填充（将其与边缘分开）称为“边距”：有关详细信息，请参阅Box model。

来源

2010-09-14 15:32:09 ChrisW

但是，这并不拉动“div内”的边界，即div的背景颜色不会b e显示在边界之外。不知道这是OP想要什么。 – 2010-09-14 15:33:44

你可以给边缘颜色的div？ – floatleft 2010-09-14 15:41:07

@chad我不这么认为......好吧，你可以指定背景颜色：边距颜色是背景颜色。 – ChrisW 2010-09-14 17:42:09

不幸的是，没有添加另一个div，我不认为你可以用CSS来做到这一点。

设计越复杂，越有可能需要无关的html标签。

你的其他（也不是很好）选项是一个图像背景，或者如果它以某种方式让你感觉更好，你可以添加元素客户端与JQuery，从而保持你的服务器端文件的“纯度”。

好运。

来源

2010-09-14 15:42:35 Jay

你可以通过创建一个带有所需边框的内部div和一个带有display：table的外部div来实现。事情是这样的：

<style> 
    .outer { 
     background: #ccc; 
     display: table; 
     width: 400px; 
    } 

    .inner { 
     border: 2px dashed #999; 
     height: 50px; 
     margin: 5px; 
    } 

</style> 

<div class="outer"> 

<div class="inner"> 
</div> 

</div>

来源

2010-09-14 15:56:55 martins

取而代之的边界，你可以使用outline属性：

div{ 
height:300px; 
width:500px; 
background-color:lightblue; 
outline:dashed; 
outline-offset:-10px;  
}

http://jsfiddle.net/H7KdA/

来源

2014-04-14 13:50:40 aldebaran

这绝对有效，并解决了OP的问题，但请注意，这只适用于如果您想将边框应用于整个元素 - 它不能用于单个边缘。即没有轮廓顶部，轮廓底部等等。因此，它不能用于一般的边界，但对于这种使用情况来说它工作得很好。 – 2016-02-29 06:38:11

在div边框上的填充

回答

相关问题