巧用box-shadow屬性做一個(gè)簡約又有質(zhì)感的方塊~
- <!DOCTYPE?html>??
- <html?lang="en">??
- ??
- <head>??
- ????<meta?charset="UTF-8">??
- ????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">??
- ????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">??
- ????<title>Document</title>??
- ????<style>??
- ????????*?{??
- ????????????margin:?0;??
- ????????????padding:?0;??
- ????????}??
- ??
- ????????body?{??
- ????????????background-color:?#ABBBCC;??
- ????????}??
- ??
- ????????.box?{??
- ????????????width:?300px;??
- ????????????height:?300px;??
- ????????????margin:?0?auto;??
- ????????????margin-top:?300px;??
- ????????????background-color:?#C7D6E0;??
- ????????????border-radius:?30px;??
- ????????????box-shadow:?15px?15px?30px?rgb(0,?0,?0,?0.15),??
- ????????????????inset?15px?15px?10px?rgba(255,?255,?255,?0.9),??
- ????????????????-15px?-15px?30px?rgba(255,?255,?255,?0.8),??
- ????????????????inset?-2px?-2px?10px?rgb(0,?0,?0,?0.15);??
- ????????}??
- ????</style>??
- </head>??
- ??
- <body>??
- ????<div?class="box"></div>??
- </body>??
- ??
- </html>??
標(biāo)簽：
