CSS双边框，外边框比内边框厚。

Question

29

在我的工作中，我需要在一个容器上产生双重边框。使用border-style: double;可以完成这个任务，然而我的客户想要外部边框更厚，内部边框保持正常厚度。

除了创建两个div（一个嵌套在另一个内），使外部div具有更大的厚度，或者通过使用边框图片外，是否有任何使用CSS在只有1个div的情况下实现这个目标的方式？指定border-style: double; 但仍能使外部边框更厚。

- learnjourney

5个回答

7

不，这是不可能的。CSS边框宽度指定边框的总厚度，而不管边框样式如何。我认为没有比将其包装在另一个DIV中更好的方法了。

编辑：你可以使用“outline”来进行黑客攻击，但是“outline”和“border”之间有微妙的差别。请参考此处了解详情。

border: double 4px black;
outline: solid 3px black;

（这将产生一个1像素的内部和4像素的外部“边框”，如果你能称之为边框的话）

- casablanca

刚刚偶然发现了这个大纲，看起来是完成工作的正确工具！ :)。这是我在该网站上的第一个问题:D。 - learnjourney

2

#box {
    border: solid 4px #333;
    outline: solid 3px #333;
    outline-offset: -12px;
}

如果您在边框上不使用双重样式，您可以更好地控制它。这种方法将为外部边框、内部轮廓和它们之间的空间提供完全的样式控制。

- Elliot Peter

1

或者你可以使用CSS3中的新功能来使用边框图像，但是它在大多数当前使用的浏览器中不被支持。

- Niet the Dark Absol

0

HTML 代码

<div id='border'>Your Text</div>

CSS 代码

#border{
    border: 2px solid blue;
    box-shadow: 0 0 0 5px green;

- Aadit Gupta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bnabilos · Accepted Answer

轮廓（Outlines）是包含在CSS3规范中的属性，它允许为单个元素同时设置边框和轮廓。

outline属性与border命令完全相同。然而，额外的offset属性允许将边框进一步移动到元素内部或外部。

我使用了轮廓来给边框设置两种不同的颜色。修改代码以使您的边框具有两种不同的大小。

#box {
border: 1px double #000;
outline: 2px solid #699;
outline-offset: -9px;
}