CSS实现多重边框-`border-image`方案演示
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>42度空间-CSS实现多重边框-`border-image`方案演示</title> <style> .borders { border: solid 12px transparent; -webkit-border-image: url('http://res.42du.cn/up/201805/nndawdka.jpg') 12 12 12 12 repeat; -moz-border-image: url('http://res.42du.cn/up/201805/nndawdka.jpg') 12 12 12 12 repeat; border-image: url('http://res.42du.cn/up/201805/nndawdka.jpg') 12 12 12 12 repeat; } .base { background: #222; padding: 4rem 2rem; color:#fff; font-weight: bold; text-align: center; margin: 1rem; } </style> </head> <body> <div class="base borders">利用border-image属性实现双重边框</div> </body> </html>
运行结果
三十课
广告
