技術(shù)頻道導航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

CSS超平滑陰影

作者:admin    時間:2021-6-27 12:13:32    瀏覽:

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

CSS超平滑陰影

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)文章推薦

 

標簽: css-shadow  css盒子陰影  css  css3  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */