摘要
新擬態(tài)UI風(fēng)格是目前比較新穎的一種前端css設(shè)計風(fēng)格乃沙，擬態(tài)風(fēng)格頁面頁呈現(xiàn)出的凹凸效果，讓我們的視覺效果更強警儒，更加賞析悅目；因此我們可以通過擬態(tài)設(shè)計出很多優(yōu)美的頁面
以下是擬態(tài)風(fēng)格設(shè)計出來的效果圖
image.png
image.png
前端代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body {
background: #ecf0f3;
}
div {
position: relative;
float: left;
width: 200px;
height: 200px;
margin-left: 80px;
margin-top: 80px;
background: #ecf0f3;
}
.drop-shadow {
border-radius: 20px;
box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;
}
.inner-shadow {
border-radius: 20px;
box-shadow: inset 18px 18px 30px #d1d9e6, inset -18px -18px 30px #fff;
}
.inner-shadow-ring {
border-radius: 100%;
box-shadow: inset 9px 9px 15px #d1d9e6, inset -9px -9px 15px #fff;
}
.inner-shadow-ring:before {
content: "";
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
border-radius: 100%;
background: #ecf0f3;
box-shadow: 9px 9px 15px #d1d9e6, -9px -9px 15px #fff;
}
</style>
<div class="drop-shadow"></div>
<div class="inner-shadow"></div>
<div class="inner-shadow-ring"></div>
</body>
</html>
補充點：設(shè)計完成后才發(fā)現(xiàn)原來網(wǎng)上已經(jīng)有了一個很好的生成工具，有興趣的小伙伴也可以體驗體驗
擬態(tài)風(fēng)格UI設(shè)計體驗地址
