我有一个问题,是否有可能做一些像纯CSS附件中的东西?CSS两个边框。不同的高度
<h3 style="border-bottom:1px solid #515151"><span style="border-bottom:3px solid #0066b3">HEADER</span></h3>
我有一个问题,是否有可能做一些像纯CSS附件中的东西?CSS两个边框。不同的高度
<h3 style="border-bottom:1px solid #515151"><span style="border-bottom:3px solid #0066b3">HEADER</span></h3>
你可以这样说:
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>
为您具体的例子这应该这样做:
<style type="text/css">
h3{
border-bottom:1px solid #515151
}
span{
border-bottom:3px solid #0066b3
}
</style>
但是,对于一个真正的使用,你可能会想一些clases添加到您的HTML元素做的更具体的目标css
你可以做到这一点,没有任何额外的标记。例如,通过使用伪元素。像这样:
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: '';
}
<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;
}
'h3 {padding-bottom:4px; border-bottom:1px solid#515151; } h3> span { border-bottom:5px solid#0066b3; }'这够了吗?我看在IE浏览器,FF,铬和它确定:) – jachu
@jachu显然是的:p – Beterraba