двойная граница без пробела между

Question

Я хотел сделать двойную рамку, но без промежутков между ними, и двойная рамка должна быть другого цвета. Вместо этого я попытался использовать изображение, но подумал, что css может выполнить эту работу за меня, я искал в сети, но вряд ли нашел что-то близкое.

Мне нужно всего лишь пунктирную границу размером 2 пикселя с верхним цветом # a4a4a4 и нижним цветом # 474747.

Любая идея, как я могу сделать это вместо создания 2-х дел?

Answer 1

CSS не поддерживает более одного цвета рамки для каждой стороны. Если вам нужны две разные пунктирные границы разных цветов, вам нужно иметь 2 разных элемента с разными стилизованными границами.

Answer 2

Ваша самая безопасная ставка - использовать два элемента, но если вы находитесь в прогрессивном улучшении, вы можете попробовать этот метод. Он будет работать в Safari, Chrome FF 3.6+ (также с вероятностью 3.5), Opera (не менее 10.10+) и IE8 + (в режиме IE8). Он использует псевдокласс :after, чтобы творить чудеса. Примечание: он не работает в FF 3.0 и оставляет дополнительную границу, но в IE6 & 7 он просто возвращается к одной границе. Вы можете проверить его демонстрацию в действии .

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;
}