CSS两个边框。不同的高度

Question

我有一个问题，是否有可能像纯css中的附件那样做？

<h3 style="border-bottom:1px solid #515151"><span style="border-bottom:3px solid #0066b3">HEADER</span></h3>

Answer 1

对于您的特定示例，应该这样做：

<style type="text/css">
  h3{
    border-bottom:1px solid #515151
  }
  span{
    border-bottom:3px solid #0066b3
  }
</style>

但是对于实际用途，你可能想在你的html元素中添加一些clases以对css进行更具体的定位

Answer 2

你可以在没有任何额外标记的情况下做到这一点。例如，通过使用伪元素。像这样：

h2 {
    border-bottom: 1px solid grey;
    position: relative;
}

h2:before {
    height: 3px;
    width: 70px;
    background: blue;
    border-radius: 3px;
    position: absolute;
    left: 0;
    bottom: -2px;
    content: '';
}

在线观看：http://jsfiddle.net/46uqV/

Answer 3

你可以这样做：

h3 {
    height:14px;
    padding-bottom: 10px;
    width: 100%;
    margin: 20px auto;
    float: left;
    border-bottom: 1px solid black;
}

h3 > span {
 border-bottom: 5px solid blue;  
}

和你的HTML

<h3><span>HEADER</span></h3>

Fiddle

Answer 4

http://jsfiddle.net/2D8c9/

<span class="outer">
    <span class="inner"></span>
    <span class="thinner-inner"></span>
</span>


.outer {
    position:relative;
    display:block;
    width:200px;
    height:20px;
    background-color:black;

}
.inner {
    position:absolute;
    display:inline-block;
    top:5px;
    height:8px;
    width:50%;
    background-color:blue;
    z-index:2;
}
.thinner-inner {
    position:absolute;
    top:8px;
    display:inline-block;
    width:100%;
    background-color:red;
    height:1px;
    z-index:1;
}