如何使用CSS进行这种样式

Question

如何做到这一点，兼容，美观和反应灵敏？我想用背景制作H2盒子，但是它会让很多问题与背景相互作用......这是很多png。我更喜欢用纯css，填充，边距等方法来实现它

full resolution image (too see texture)

Answer 1

这可以使用您选择的任何语义上合适的元素来完成，而无需设置背景颜色。

http://cssdeck.com/labs/n2z0icvf

<h1>Technique</h1>

h1 {
  overflow: hidden;
  padding-left: 2em;
}

h1:before,
h1:after {
  content: " ";
  display: inline-block;
  border-bottom: 2px solid;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
  width: 100%;
}

Answer 2

工作小提琴： http://jsfiddle.net/58JCY/

HTML：

<fieldset>
    <legend>LEVE TECHNIQUE</legend>
</fieldset>

CSS：

fieldset {
    border:none;
    border-top: 1px solid #999;
}
legend {
    padding: 0 5px;
}