我正在尝试使用伪选择器:before
和:after
用边框图像包围div。但是,我想我错过了一些东西。无论我尝试什么,:after
图像都不会附加到元素的右侧,并且文本已下降到图像下方,如此 JsFiddle 示例中所示。
.CSS
.panel {
border:2px solid #634e32;
border-radius:4px;
margin-bottom: 30px;
background-color: #ecd8b5;
}
.panel-header{
margin: -5px -1px 10px 2px;
padding-left: 15px;
background:url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_t.png') repeat-x;
}
.panel-header:before,
.panel-header:after{
content:"";
width:9px;
height:36px;
overflow:hidden;
}
.panel-header:before {
content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tl.png');
margin-left:-20px;
}
.panel-header:after {
content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tr.png');
}
.HTML
<div class="panel">
<div class="panel-header">Header Title Goes Here</div>
</div>
http://jsfiddle.net/53xxV/
.panel {
border:2px solid #634e32;
border-radius:4px;
margin-bottom: 30px;
background-color: #ecd8b5;
position: relative;
padding-top:40px
}
.panel-header{
position:absolute;
top:0;
left:0;
right:0;
padding-left: 15px;
background:url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_t.png') repeat-x;
height : 29px;
color: hotpink; /* :P */
padding-top: 10px;
}
.panel-header:before,
.panel-header:after{
content:"";
width:9px;
height:36px;
overflow:hidden;
}
.panel-header:before {
content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tl.png');
position:absolute;
left:0;
top:0;
}
.panel-header:after {
content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tr.png');
position:absolute;
right:0;
top:0;
}