CSS实现多重边框-伪元素方案演示
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>42度空间-CSS实现多重边框-伪元素方案演示</title> <style> .borders { border: solid 6px #fff; position: relative; } .borders:before { content: ""; position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px; border: solid 6px #888; } .base { background: #222; padding: 4rem 2rem; color:#fff; font-weight: bold; text-align: center; margin: 1rem; } </style> </head> <body> <div class="borders base">利用伪元素实现双重边框</div> </body> </html>
运行结果
三十课
广告
