卡卡網(wǎng)

本文介紹一款CSS超平滑陰影，實現(xiàn)起來非常簡單，但效果好看，實用性很強。

CSS超平滑陰影

HTML

<div class="box">
  
</div>

CSS

.box {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 
              0 6.7px 5.3px rgba(0, 0, 0, 0.048), 
              0 12.5px 10px rgba(0, 0, 0, 0.06), 
              0 22.3px 17.9px rgba(0, 0, 0, 0.072), 
              0 41.8px 33.4px rgba(0, 0, 0, 0.086),
              0 100px 80px rgba(0, 0, 0, 0.12);
  height: 250px;
  width: 350px;
  margin: 100px auto;
  background: white;
  border-radius: 5px;
}

body {
  background: #EEF2F7;
}

execcodegetcode

相關(guān)文章推薦

• 8款非常漂亮的CSS 3D外觀框陰影

標簽: css-shadow  css盒子陰影  css  css3