如何简化此标题与侧面的线，以便它不需要css3背景属性？ [英] How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?

问题描述

我有一个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标题：{
后面：线性渐变（底部，黑色，黑色）无重复右中心/ 95％1px; 
 content：; 
 display：table-cell; 
 width：50％; 
} 
  

解决方案

我有一个小问题，我已经在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中）。

我真的想了解...

新答案 / p>

所有上面的假设是要求有一个透明的样式（也就是说，设置一个可以通过h1看到的背景）不是这样，有另一个可行的解决方案，使用box-shadow而不是渐变barckground：

  .test {
显示：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; 
} 
  

新演示

I have a css class for centering a heading, and adding vertically centered lines on either side. Problem is, it uses css3 background properties, and not every browser supports those. So I'd like to simplify this for cross browser compatibility, but am not sure how to do that.

Is there a simpler way to achieve this, without the css3 background (and without adding any extra elements or static heights/widths)?

demo here

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

解决方案

There is my best try.

I have a little isue that I have corrected in Chrome; but I really don't know even why it works.

The CCS is

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

I am using the border to display the black line, and to have it positioned in place I have reduced the height of the table to 0.

fiddle

In the fiddle, I have kept your original demo, so that you can compare side by side.

And now, the weird part. change rgba(0,0,0,0.01) in the border bottom to rgba(0,0,0,0.001), and it will break (at least in Chrome).

I really would like to understand that ...

new answer

All the above was asuming that the requirement was to have a transparent style (that is , that it was posible to set a background that could be seen thru the h1. If this is not the case, there is another posible solution, using box-shadow instead of gradient barckground:

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

new demo

这篇关于如何简化此标题与侧面的线，以便它不需要css3背景属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！