Укажите границу, которая имеет два разных цвета в PURE CSS

Question

Могу ли я указать границу, например, 1px solid color1 / color2.для ситуации, если я должен поставить границу, как на картинке.Я знаю, что могу поставить эту границу как изображение, но я смотрю, можно ли это сделать в чистом CSS.

Answer 1

Вы также можете добиться эффекта нескольких границ элемента с элементами псевдонима :before и :after.См. Эту страницу для примеров http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html

Вот демонстрационная версия ja с использованием этого метода (только верхняя граница, как вы ее описали): http://jsfiddle.net/m7g6L/

div {
    border-top: 3px solid #00f;
    position: relative;
    z-index: 10;
    margin: 10px;
    width: 200px;
}

div:before {
    content: "";
    border-top: 1px solid #f00;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    z-index: -1;
}

Answer 2

Попробуй это. Заключите элемент в элемент div, затем используйте элемент div для достижения желаемого эффекта, удаляя поле и границу элемента div, как показано ниже:

<div style="border-top: solid red 2px; margin: none; padding: 0px;">
<p style="margin-top: 0px; border-top: solid blue 2px;">This is a paragraph.Blah Blah 
Blah Blah</p>
</div>

Это сработало, когда я попробовал.

Answer 3

вы можете использовать несколько элементов и играть с отступами и фонами:

http://jsfiddle.net/SJFx4/

не совсем семантически, но это работает - вы можете использовать псевдоэлементы для достижения того же эффекта

Answer 4

Да, используйте outline:.

Справедливое предупреждение: некоторые элементы могут испортить фокус.

Пример

Answer 5

Строго говоря, насколько я знаю, CSS не поддерживает несколько границ.

Тем не менее, вы можете визуально добиться желаемого эффекта, комбинируя обычную рамку с контуром:

#myElement    {
    border:  solid 2px blue;
    outline: solid 2px red;
}

Если вам нужно, чтобы внешняя «граница» отображалась только на одной стороне, например top, тогда самое простое решение - использовать включающий элемент div:

div .borderHelper    {
    border-top:  solid 2px red;
    margin:      none;
    padding:     0;
}

#myElement    {
    border-top:  solid 2px blue;
}