目的
我希望能够在css中创建像this这样的边框,可能使用伪元素然后使用背景图像.
码
HTML
@H_403_8@<div id="footer"></div>CSS
@H_403_8@#footer { background: #4b4b4b; color: #868686; padding: 0; position: relative; height: 100px; width: 900px; } #footer:before { content: ""; display: block; width: 220px; background-color: #e1e1e1; height: 8px; }解决方法
看下面的代码片段,这是你想要的吗？
@H_403_8@body {
background: silver;
padding: 0 10px;
}
#content:after {
height: 10px;
display: block;
width: 100px;
background: #808080;
border-right: 1px white;
content: '';
}
#footer:before {
display: block;
content: '';
background: silver;
height: 10px;
margin-top: -20px;
margin-left: 101px;
}
#content {
background: white;
}
#footer {
padding-top: 10px;
background: #404040;
}
p {
padding: 100px;
text-align: center;
}
#footer p {
color: white;
}
@H_403_8@<body>
<div id="content"><p>#content</p></div>
<div id="footer"><p>#footer</p></div>
</body>
