CSS: Как мне сделать эти двойные линии, которые вертикально центрированы с текстом?

Question

Я знаю, что граница имеет двойной атрибут. Нужно ли взламывать некоторые позиции с помощью border: double, чтобы заставить это работать?

Answer 1

Для этого можно использовать CSS-градиенты, используя цветовые ограничители для создания линий.

http://jsfiddle.net/uUNLD/1/

p {
    background-image: -webkit-linear-gradient(silver 0, silver 1px, white 1px, white 4px, silver 4px, silver 5px, white 5px);
    background-image: -moz-linear-gradient(silver 0, silver 1px, white 1px, white 4px, silver 4px, silver 5px, white 5px);
    background-image: -ms-linear-gradient(silver 0, silver 1px, white 1px, white 4px, silver 4px, silver 5px, white 5px);
    background-image: -o-linear-gradient(silver 0, silver 1px, white 1px, white 4px, silver 4px, silver 5px, white 5px);
    background-position: 0 .4em;
}

Answer 2

Было бы трудно сделать это с double, но вот альтернативный способ сделать это.

http://jsfiddle.net/brenjt/SZG6X/1/

HTML

<div class="box"><span class="text">BACKGROUND</span></div>

CSS

.box {
    width:100%;
    height:3px;
    border-top:1px solid #DDD;
    border-bottom:1px solid #DDD;
    text-align:center;
    line-height:3px;
}

.box .text {
    background: #FFF;
    padding:3px 6px;
    font-size:0.9em;
    color:#DDD;
}

Answer 3

<h1>Hello, World!</h1>

h1 { color: gray; height: 10px; }
h1:before, h1:after { content: ''; border: 1px solid gray; width: 35%; display: inline-block; height: 5px; border-left: none; border-right: none; margin: 0 10px; }

http://jsfiddle.net/Hn7Hk/

Answer 4

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

  h1 {
    text-align: center;
    position: relative;
    text-transform: uppercase;
    font-size: 1em;
    color: #ccc
  }
  h1:before {
    content: "";
    border-top: solid 1px;
    border-bottom: solid 1px;
    position: absolute;
    top: 39%;/* might need some tweaking */
    left: 0;
    width: 100%;
    height: 10%;

  }

  h1 span {
    background: #fff;
    padding: 0 4px;
    position: relative;
  }

он использует этот HTML:

<h1><span>Hello World</span></h1>

живая версия: http://jsbin.com/abasif/