本文章主要介绍了CSS实现多重边框和内凹圆角,具有不错的的参考价值,希望对您有所帮助,如解说有误或未考虑完全的地方,请您留言指出,谢谢!

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实现内凹圆角的思路【截图来自慕课网】:


发布评论
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

sass入门(一)详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。