css - 如何使用 css 制作这种样式

Question

怎么可能做到这一点，兼容，美观且响应迅速？我想用背景制作 H2 盒子，但与背景交互会产生很多问题......它有很多 png。我更喜欢使用纯 css、填充、边距等的方法

全分辨率图像（也见纹理）

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;
}