目的
我希望能够在css中创建像this这样的边框,可能使用伪元素然后使用背景图像.
码
HTML
- <div id="footer"></div>
CSS
- #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;
- }
解决方法
看下面的代码片段,这是你想要的吗？
- 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;
- }
- <body>
- <div id="content"><p>#content</p></div>
- <div id="footer"><p>#footer</p></div>
- </body>
