CSS实现多重边框和内凹圆角

最新推荐文章于 2024-02-16 00:44:16 发布

weixin_30675247

最新推荐文章于 2024-02-16 00:44:16 发布

阅读量242

点赞数

原文链接：http://www.cnblogs.com/lqcdsns/p/5414897.html

版权

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

转载于:https://www.cnblogs.com/lqcdsns/p/5414897.html

weixin_30675247

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现多重边框和内凹圆角

CSS实现多重边框 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS实现多重边框</title> 6 <style> 7 ...
复制链接

扫一扫