CSS實現多重邊框
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS實現多重邊框</title> 6 <style> 7 div { 8 width: 100px; 9 height: 150px; 10 margin: 40px auto; 11 text-align: center; 12 background: lightblue; 13 border: 20px solid cornflowerblue; 14 } 15 #box1 { 16 outline: 5px solid chocolate; 17 outline-offset: -10px; /*outline描邊模擬的邊框會在真正邊框的里面，但是描邊沒有辦法貼合圓角的位置*/ 18 } 19 #box2 { 20 /*盒子陰影實現雙重邊框，第四個參數表示投影擴張的像素，","分隔繪制多個投影*/ 21 -webkit-box-shadow: 0 0 0 5px brown, 22 0 0 0 10px yellow, 23 0 0 0 15px green; 24 -moz-box-shadow: 0 0 0 5px brown, 25 0 0 0 10px yellow, 26 0 0 0 15px green; 27 box-shadow: 0 0 0 5px brown, 28 0 0 0 10px yellow, 29 0 0 0 15px green; 30 -webkit-border-radius: 20px; 31 -moz-border-radius: 20px; 32 border-radius: 20px; 33 } 34 </style> 35 </head> 36 <body> 37 38 <div id="box1">box1</div> 39 <div id="box2">box2</div> 40 <h1>box1和box2的繪制方式都不會影響布局</h1> 41 42 </body> 43 </html>
CSS實現內凹圓角的思路【截圖來自慕課網】：
