我正在尝试用背景图片划分边框。我不知道这样是否可行。希望有人能帮我想出一个干净的好方法来实现这一目标。
我正在尝试获得底部的那个,而顶部的那个就是我现在拥有的。
.tinybanner h1 {
padding-bottom: 0.5em;
margin-bottom: 50px;
border-bottom: 1px solid $green;
display: inline-block;
@include adjust-font-size-to(24px);
background: url('images/tinybanner.png') center bottom no-repeat;
}
最佳答案
通过使用伪选择器:after
,你可以在每个h1之后添加一个元素:
h1 {
padding-bottom: 0.5em;
margin-bottom: 50px;
border-bottom: 1px solid green;
display: inline-block;
position: relative;
}
h1:after {
position: absolute;
left: 50%; /* center the element */
margin-left: -15px; /* shift left by (width+border)/2 */
display: block;
content: '';
width: 20px;
height: 20px;
background: green; /* this can of course be a background image, too */
border: 10px solid white; /* adds a gap to the left and right */
}
我喜欢这种方法的原因是它可以很好地降级。如果您的浏览器不支持 :after
伪选择器,您仍然会在标题下方留下边框(因为它是在 h1
上设置的,而不是伪选择器元素)并且看不到悬挂的背景图像(因为它是在 h1:after
上设置的)。
关于html - 使用背景图标拆分 css 边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19127029/