css-边框透明

自己做的小例子边框透明

第一个

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{margin:0;padding:0}
 8         .container{width:200px; height:200px;background:red; padding:10px;}
 9         .content{width:50px; height:50px;border:1px solid hsla(0,0%,100%,.5);background:#fff;border-radius: 1px;background-clip: padding-box;}
10     </style>
11 </head>
12 <body>
13 <div class="container">
14     <div class="content">
15     </div>
16 </div>
17 </body>
18 </html>

第二个

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7          body{background: red;}
 8         .content{width:50px; height:50px;border:1px solid rgba(255,255,255,.5);background:#fff;border-radius: 5px;background-clip: padding-box;}
 9     </style>
10 </head>
11 <body>
12     <div class="content">
13     </div>
14 </body>
15 </html>