Двойная граница CSS (2 цвета) без использования контура?

Мне интересно, как вы, ребята, думаете, это самый простой способ получить двойную рамку с двумя цветами вокруг div? Я пробовал использовать границу и контур вместе, и это работало в Firefox, но контур, похоже, не работает в IE, и это своего рода проблема. Любые хорошие способы сделать это?

Это то, что у меня было, но контур не работает с IE: контур: 2px solid #36F; граница: 2px сплошная #390;

Спасибо.


html css border pseudo-element
person zProgrammer    schedule 06.02.2013    source источник

Ответы (7)


arrow_upward
41
arrow_downward

Вы можете добавить несколько границ, используя псевдоэлементы, а затем разместить их вокруг исходной границы. Без дополнительной разметки. Совместимость с разными браузерами, это было примерно с 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
}

http://jsfiddle.net/fvHJq/1/

person albert    schedule 06.02.2013
comment
Для справки, это не работает с IE7 (который не понимает :before в большинстве случаев, если таковые имеются). Однако должно быть хорошо с IE8 и более поздними версиями... и это не требует возни с HTML. :) - person cHao; 06.02.2013
comment
Спасибо! Тоже хорошее объяснение. - person zProgrammer; 07.02.2013
comment
@ Джек, просто указываю, что это решение было номером 2 в ссылке, которую я отправил вам, с подробным описанием нескольких разных способов. - person Nick Mitchinson; 07.02.2013
comment
вы можете использовать его в ie7 здесь stackoverflow.com/questions/4181884/ - person albert; 07.05.2015

arrow_upward
8
arrow_downward

Используйте тень блока для второй границы.

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, как это делает контур.

person Vitali Protosovitski    schedule 18.08.2015

arrow_upward
2
arrow_downward

Очень простое решение, которое вы можете использовать в качестве запасного варианта, если ничего другого не будет использовать два div. Ваш основной div, а затем пустой, просто обертывающий его, который вы можете использовать для установки второй границы.

person Nick Mitchinson    schedule 06.02.2013
comment
Да, это было то, что я собирался сделать. Просто любопытно, есть ли какой-нибудь простой CSS, который я пропускаю, чтобы сделать это. - person zProgrammer; 06.02.2013
comment
Не то, что я знаю из. Я предполагаю, что вы уже читали это, но на всякий случай: impressivewebs.com/multiple-borders- CSS - person Nick Mitchinson; 06.02.2013

arrow_upward
0
arrow_downward

Поздно на вечеринку с этим вопросом, но я чувствую, что должен записать это где-нибудь. Вы можете создать масштабируемую функцию в чем-то вроде Less или 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)
person chas    schedule 06.03.2016

arrow_upward
0
arrow_downward

С помощью box-shadow вы можете получить столько разных цветовых границ, сколько захотите. Например:

#mydiv{
  height: 60px;
  width: 60px;
  box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff;
}

<div id="mydiv">&nbsp;</div>

https://jsfiddle.net/aruanoc/g5e5pzny

person aruanoc    schedule 25.01.2017

arrow_upward
0
arrow_downward

Маленькая хитрость ;)

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;
person TheCrazyProfessor    schedule 15.02.2017

arrow_upward
0
arrow_downward 

.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>

используйте имя класса для .border с учетом значений border:2px solid #000 для одной границы. Затем вы хотите, чтобы другая граница попыталась .border:after с учетом значений, если вы получили вторую границу, проверьте выше пример кода

person Community    schedule 16.08.2017