如何用侧面的线条简化此标头，使其不需要 css3 背景属性？

我有一个 css 类，用于居中标题，并在两侧添加垂直居中的线条。问题是，它使用 css3 背景属性，并不是每个浏览器都支持这些属性。所以我想简化这一点以实现跨浏览器兼容性，但不确定如何做到这一点。

有没有更简单的方法来实现这一点，没有 css3 背景（并且不添加任何额外的元素或静态高度/宽度）？

演示在这里

.section-heading {
  display: table;
  white-space: nowrap;
}
.section-heading:before {
  background: linear-gradient(to bottom, black, black) no-repeat left center / 95% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}
.section-heading:after {
  background: linear-gradient(to bottom, black, black) no-repeat right center / 95% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

<h2 class="section-heading">Example</h2>

您可以使用字段集和图例，这不是很漂亮的代码，但您不需要 CSS3

http://jsfiddle.net/dASCv/9/

fieldset {
  text-align: center;
  border: none;
  border-top: 1px solid black;
}
legend {
  padding: 20px;
}

<fieldset>
  <legend>
    <h2>Example</h2>
  </legend>
</fieldset>

或者另一种方法:after和:before

http://jsfiddle.net/dASCv/10/

div {
  text-align: center;
}
h2:before,
h2:after {
  border-top: 1px solid black;
  display: block;
  height: 1px;
  content: " ";
  width: 40%;
  position: absolute;
  left: 0;
  top: 1.4em;
}
h2:after {
  right: 0;
  left: auto;
}

<div>
  <h2>text TEXT</h2>
</div>

这是我最好的尝试。

我在Chrome中纠正了一点问题;但我真的不知道为什么它会起作用。

CCS是

.test {
     display: table-row;
     white-space: nowrap;
     line-height: 0px;
}
.test:before,
.test:after {
     border-color: transparent;
     border-top: solid black 1px;
     border-left: solid transparent 1px;
     border-bottom: solid rgba(0,0,0,0.01) 11px;
     border-right: solid transparent 1px;
     content: "";
     display: table-cell;
     width: 50%;
}
.test:before {
     border-right: solid 30px transparent;
}
.test:after {
     border-left: solid 30px transparent;
}

我使用边框来显示黑线，并且为了将其定位到位，我将桌子的高度降低到 0。

小提琴

在小提琴中，我保留了您的原始演示，以便您可以并排比较。

现在，奇怪的部分将边框底部的 rgba（0,0,0,0.01）更改为 rgba（0,0,0,0.001），它会中断（至少在 Chrome 中）。

我真的很想了解...

新答案

以上所有内容都假设要求是具有透明样式（也就是说，可以设置可以通过h1看到的背景。如果不是这种情况，还有另一种可能的解决方案，使用盒子阴影而不是渐变树皮：

.test {
  display: table-row;
  white-space: nowrap;
}
.test:before,
.test:after {
  border: solid white 10px;
  content: "";
  display: table-cell;
  width: 50%;
  height: 10px;
  line-height: 10px;
  box-shadow: inset 0px 5px white, inset 0px 6px black;
}
.test:before {
  border-right-width: 10px;
  border-left-width: 1px;
}
.test:after {
  border-left-width: 10px;
  border-right-width: 1px;
}

新演示

1 元素解决方案

小提琴

div {
  display: inline-block;
  background: #fff;
  padding: 0 10px;
}
div:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 20px;
  border-bottom: 1px solid #c2c2c2;
  margin-top: -9px;
  z-index: -1;
}

<div>A header</div>

（注意：要使此解决方案起作用，您需要在其父元素上设置文本对齐：中心）

<小时 />

2 元素解决方案（适用于背景图像）

小提琴

.splitHR {
  text-align: center;
  overflow: hidden;
}
.splitHRText {
  display: inline-block;
  position: relative;
  padding: 0 10px;
}
.splitHRText:before,
.splitHRText:after {
  content: '';
  display: block;
  width: 1000px;
  position: absolute;
  top: 0.73em;
  border-top: 1px solid #c2c2c2;
}
.splitHRText:before {
  right: 100%;
}
.splitHRText:after {
  left: 100%;
}

<div class="splitHR">
  <span class="splitHRText">A header</span>
</div>

请为 CSS 添加Prefix

对于 Webkit 浏览者

 -webkit-gradient

火狐

-moz-linear-gradient

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

更多详情请点击此处 http://webdesignerwall.com/tutorials/cross-browser-css-gradient

使用这种方式也可以获得答案，请检查这个

<p style="display:block; width:100%; text-align:center; 
border-bottom:1px #ccc solid; line-height:3px">
 <span style="background-color:red; ">Examples</span></p>

http://jsfiddle.net/dASCv/11/

css

h2 {
    border-bottom: 1px solid black;
    text-align: center;
    margin: 0;
    padding: 0;
}
h2 span {
    display: inline-block;
    position: relative;
    padding: 0 20px;
    bottom: -15px;
    background-color: white;
}

标记

<h2><span>text Textsssssssssssssssss</span></h2>

如果为 h2 设置高度，则可以以百分比形式设置跨度的底部。

您可以使用以下代码：

JsFiddle 演示

.HTML：

<h2><span>Title is here</span></h2>

.CSS：

h2{
    display:block;
    text-align:center;
    line-height:30px;
}
h2 span{
    background:#fff;
    padding:0 10px;
}
h2:after{
    content:"";
    display:block;
    border-top:1px solid black;
    margin-top:-15px;
}

更新：

您也可以使用此代码：（单个元素）

小提琴

.HTML：

<h2>Title is here</h2>

.CSS：

h2{
display: table;
margin: 0 auto;
text-align: center;
line-height: 30px;
padding: 0 10px;
background: #FFF;
}
h2:after{
   content:"";
    display:block;
    border-top:1px solid;
    margin-top:-15px;
    position:absolute;
    width:100%;
    left:0;
    z-index:-1;
}

小提琴

新演示

1 元素解决方案

2 元素解决方案（适用于背景图像）

相关内容

最新更新

热门标签：