Мне было интересно, что вы, ребята, думаете, это самый простой способ получить двойную границу с двумя цветами вокруг div? Я попытался использовать границы и контуры вместе, и он работал в Firefox, но контур, похоже, не работает в IE, и это проблема. Какие-нибудь хорошие способы сделать это?
Это то, что у меня было, но схема не работает с IE: схема: 2px solid # 36F; border: 2px solid # 390;
Спасибо.
Вы можете добавить несколько границ с помощью псевдоэлементов и разместить их вокруг своей исходной границы. Никакой дополнительной разметки. Совместимость с кросс-браузером, это было вокруг с CSS 2.1. Я бросил демо на jsfiddle для вас... обратите внимание, что расстояние между цветами границ есть для примера. Вы можете закрыть его, изменив количество пикселей в абсолютном позиционировании.
.border
{
border:2px solid #36F;
position:relative;
z-index:10
}
.border:before
{
content:"";
display:block;
position:absolute;
z-index:-1;
top:2px;
left:2px;
right:2px;
bottom:2px;
border:2px solid #36F
}
Используйте тень окна для второй границы.
div.double-border {
border: 1px solid #fff;
-webkit-box-shadow: 0px 0px 0px 1px #000;
-moz-box-shadow: 0px 0px 0px 1px #000;
box-shadow: 0px 0px 0px 1px #000;
}
В этом случае box-shadow не игнорирует свойство border-radius, подобное контуру
Очень простое решение, которое вы могли бы использовать в качестве спада, если бы ничто другое не предназначалось для использования двух div. Ваш главный div, а затем пустой, просто обернув его, чтобы вы могли использовать вторую границу.
Поздно к партии для этого вопроса, но я чувствую, что я должен записать это где-то. Вы можете сделать масштабируемую функцию чем-то вроде Less or Stylus, который создаст любое количество границ (Stylus здесь):
abs(n)
if n < 0
(-1*n)
else
n
horizBorder(n, backgroundColor)
$shadow = 0 0 0 0 transparent
$sign = (n/abs(n))
for $i in ($sign..n)
/* offset-x | offset-y | blur-radius | spread-radius | color */
$shadow = $shadow, 0 (2*$i - $sign)px 0 0 #000, 0 (2*$i)px 0 0 backgroundColor
return $shadow
Затем
$background: #FFF // my background was white in this case and I wanted alternating black/white borders
.border-bottom
box-shadow: horizBorder(5, $background)
.border-top
box-shadow: horizBorder(-5, $background)
.border-top-and-bottom
box-shadow: horizBorder(5, $background), horizBorder(-5, $background)
С помощью теневой коробки вы можете достичь столько разных цветовых границ, сколько хотите. Например:
#mydiv{
height: 60px;
width: 60px;
box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff;
}
<div id="mydiv"> </div>
Маленький трюк;)
box-shadow:
0 0 0 2px #000,
0 0 0 3px #000,
0 0 0 9px #fff,
0 0 0 10px #fff,
0 0 0 16px #000,
0 0 0 18px #000;
.border{
width: 200px;
height: 200px;
background: #f06d06;
position: relative;
border: 5px solid blue;
margin: 20px;
}
.border:after {
content: '';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
background: green;
z-index: -1;
}<div class="border">
</div>