Question

我想制作双边框，但两者之间没有空格，双边框应该是不同的颜色。我尝试使用图像，但我认为CSS可能可以为我执行这项工作，我搜索网但很难找到任何接近。

我想要的是总共2px虚线边框，顶部颜色为＃a4a4a4，底部颜色为＃474747。

知道我怎么能这样做而不是创建2个div？

Answer 1

CSS每边不支持多种边框颜色。如果你想要两种不同颜色的不同点缀边框，你需要有2个不同的元素，每个元素都有不同的样式边框。

Answer 2

您最安全的选择是使用两个元素，但如果您正在进行渐进增强，则可以尝试使用此方法。它适用于Safari，Chrome FF 3.6+（也是Prob 3.5），Opera（至少10.10+）和IE8 +（在IE8模式下）。它使用:after伪类来实现它的魔力。 注意：它无法在FF 3.0中工作并留下额外的边框，但在IE6＆amp; 7它只是回到了一个边界。你可以check out a demo使用它。

<强> HTML

<div id="double">
  <h2>Double Border</h2>
  <p>This div <a href="#">should</a> have two borders.</p>
  <p>There are only normal elements inside.</p>
</div>

<强> CSS

#double {
 border: dotted 1px #a4a4a4;
 padding: 10px;
 position: relative;
}

#double > * {
 position: relative;
 z-index: 100;
}

/* Add an "extra" element using CSS */
#double:after {
 content: "";
 position: absolute;
 z-index: 50;
 border: dotted 1px #474747;
 left: 0;
 top: 0;
 bottom: 0;
 right: 0;
 display: block;
}

双边框，中间没有空格

2 个答案: