欢迎光临散文网 会员登陆 & 注册

巧用box-shadow属性做一个简约又有质感的方块~

2023-02-24 20:44 作者:嘿大喵喵  | 我要投稿
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  8.     <title>Document</title>  
  9.     <style>  
  10.         * {  
  11.             margin: 0;  
  12.             padding: 0;  
  13.         }  
  14.   
  15.         body {  
  16.             background-color: #ABBBCC;  
  17.         }  
  18.   
  19.         .box {  
  20.             width: 300px;  
  21.             height: 300px;  
  22.             margin: 0 auto;  
  23.             margin-top: 300px;  
  24.             background-color: #C7D6E0;  
  25.             border-radius: 30px;  
  26.             box-shadow: 15px 15px 30px rgb(0, 0, 0, 0.15),  
  27.                 inset 15px 15px 10px rgba(255, 255, 255, 0.9),  
  28.                 -15px -15px 30px rgba(255, 255, 255, 0.8),  
  29.                 inset -2px -2px 10px rgb(0, 0, 0, 0.15);  
  30.         }  
  31.     </style>  
  32. </head>  
  33.   
  34. <body>  
  35.     <div class="box"></div>  
  36. </body>  
  37.   
  38. </html>  


标签：

巧用box-shadow属性做一个简约又有质感的方块~的评论 (共 条)

分享到微博请遵守国家法律