box

祝您2019豬事順利，心想事成。

前面兩篇文章都有提到過box-shadow，里面也有很多的基礎(chǔ)知識(shí)，有看過的小伙伴應(yīng)該都有或多或少的收獲吧，今天我們再從基礎(chǔ)入手，希望能讓大家更熟悉它。

沒有看過之前文章的小伙伴請點(diǎn)擊：

CSS3 box-shadow實(shí)現(xiàn)背景動(dòng)畫

CSS3動(dòng)畫解析抖音 LOGO制作

下面我們從最基礎(chǔ)的開始演示。

關(guān)鍵點(diǎn): 1、外 box-shadow 前四個(gè)參數(shù)：x 偏移值、y 偏移值 、模糊半徑、擴(kuò)張半徑。 2、單側(cè)投影的核心是第四個(gè)參數(shù)：擴(kuò)張半徑。這個(gè)參數(shù)會(huì)根據(jù)你指定的值去擴(kuò)大或縮小投影尺寸，如果我們用一個(gè)負(fù)的擴(kuò)張半徑，而他的值剛好等于模糊半徑，那么投影的尺寸就會(huì)與投影所屬的元素尺寸完全一致，除非使用偏移量來移動(dòng)他，否則我們將看不到任何投影。

<style>.left { box-shadow: -8px 0 5px -5px #333;}.right { box-shadow: 8px 0 5px -5px #333;}.top { box-shadow: 0 -8px 5px -5px #333;}.bottom { box-shadow: 0 8px 5px -5px #333;}</style><div class='left'>左</div><div class='right'>右</div><div class='top'>上</div><div class='bottom'>下</div>立體文字陰影

知識(shí)點(diǎn)：

1、立體文字陰影的關(guān)鍵點(diǎn)在于多層 text-shadow 的疊加

2、合理運(yùn)用了 SASS 函數(shù)來自動(dòng)計(jì)算多層 text-shadow 的 CSS 代碼

3、運(yùn)用了 Sass 的顏色函數(shù)，漸進(jìn)實(shí)現(xiàn)層級陰影顏色 - fade-out: 改變顏色的透明度，讓顏色更加透明 - desaturate: 改變顏色的飽和度值，讓顏色更少的飽和

4、HSL(顏色值)

<style>@function blessing($color) { $val: 0px 0px $color; @for $i from 1 through 50 { $color: fade-out(desaturate($color, 1%), .02); $val: #{$val}, -#{$i}px #{$i}px #{$color}; } @return $val;}div { text-align: center; font-size: 20vmin; line-height: 45vh; text-shadow: blessing(hsl(0, 100%, 50%)); color: hsl(14, 100%, 60%);}</style><div>福</div>

編譯后的css(推薦scss在線編譯為css工具) https://www.sassmeister.com/

...div { text-align: center; font-size: 20vmin; line-height: 45vh; text-shadow: 0px 0px #992400, 1px 1px rgba(152, 36, 1, 0.98), 2px 2px rgba(151, 37, 2, 0.96), 3px 3px rgba(151, 37, 2, 0.94), ... ... ... 49px 49px rgba(116, 56, 37, 0.02), 50px 50px rgba(115, 56, 38, 0); color: #ff6333;}

從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)

從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)

知識(shí)點(diǎn)

1、借用了元素的兩個(gè)偽元素

2、通過漸變色填充兩個(gè)偽元素，再通過位移、變換放置在合適的位置

<style>div { position: relative; width: 30vmin; height: 30vmin; line-height: 30vh; text-align: center; font-size: 30px; background: #fff; margin: 30vmin auto;}div::before,div::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;}div::before { content: ':before'; font-size: 30px; text-align: center; line-height: 30vh; transform-origin: 0 50%; transform: translate(100%, 0) skewY(45deg) scaleX(.6); background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);}div::after { content: ':after'; font-size: 30px; text-align: center; line-height: 30vh; transform-origin: 0 0; transform: translate(0%, 100%) skewX(45deg) scaleY(.6); background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);}</style><div>Web秀</div>

從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)

知識(shí)點(diǎn)

1、陰影實(shí)現(xiàn)的關(guān)鍵點(diǎn)在于使用偽元素絕對定位在容器的一角，元素本身透明，陰影擴(kuò)散開形成內(nèi)切圓角效果

2、陰影實(shí)現(xiàn)缺點(diǎn)，單個(gè)標(biāo)簽最多只能是2個(gè)內(nèi)切圓角

3、徑向漸變實(shí)現(xiàn)內(nèi)切圓角可以是4邊

<style>div { position: relative; width: 20vw; height: 8vw; margin: 1vw auto; border-radius: 1vmin; overflow: hidden; line-height: 8vw; color: #fff; text-align: center;}.shadow::before { position: absolute; content: ""; top: -2vw; left: -2vw; width: 4vw; height: 4vw; border-radius: 50%; box-shadow: 0 0 0 15vw #e91e63; z-index: -1;}.shadow::after { position: absolute; content: ""; bottom: -2vw; right: -2vw; width: 4vw; height: 4vw; border-radius: 50%; box-shadow: 0 0 0 15vw #e91e63; z-index: -1;}.linear { background-size: 70% 70%; background-image: radial-gradient( circle at 100% 100%, transparent 1vw, transparent 2vw, #03A9F5 2vw), radial-gradient( circle at 0 0, transparent 0, transparent 2vw, #03A9F5 2vw), radial-gradient( circle at 100% 0, transparent 0, transparent 2vw, #03A9F5 2vw), radial-gradient( circle at 0 100%, transparent 0, transparent 2vw, #03A9F5 2vw); background-repeat: no-repeat; background-position: right bottom, left top, right top, left bottom;}</style><div class="shadow">陰影實(shí)現(xiàn)缺點(diǎn)最多是2邊</div><div class="linear">徑向漸變內(nèi)切圓角4邊</div>

從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)

知識(shí)點(diǎn) ：圓環(huán)進(jìn)度條的移動(dòng)本質(zhì)上是陰影順序延時(shí)移動(dòng)的結(jié)果。

<style>body { background: #000;}.container { position: relative; overflow: hidden; width: 124px; height: 124px; overflow: hidden; margin: 100px auto; border-radius: 50%;}.shadow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; line-height: 120px; border-radius: 50%; color: #fff; font-size: 20px; cursor: pointer; box-shadow: 60px -60px 0 2px #e91e63, -60px -60px 0 2px #e91e63, -60px 60px 0 2px #e91e63, 60px 60px 0 2px #e91e63; text-align: center;}.shadow:hover { animation: border 0.5s ea forwards;}@keyframes border { 0% { box-shadow: 60px -60px 0 2px #e91e63, -60px -60px 0 2px #e91e63, -60px 60px 0 2px #e91e63, 60px 60px 0 2px #e91e63, 0 0 0 2px transparent; } 25% { box-shadow: 0 -125px 0 2px #e91e63, -60px -60px 0 2px #e91e63, -60px 60px 0 2px #e91e63, 60px 60px 0 2px #e91e63, 0 0 0 2px #fff; } 50% { box-shadow: 0 -125px 0 2px #e91e63, -125px 0px 0 2px #e91e63, -60px 60px 0 2px #e91e63, 60px 60px 0 2px #e91e63, 0 0 0 2px #fff; } 75% { box-shadow: 0 -125px 0 2px #e91e63, -125px 0px 0 2px #e91e63, 0px 125px 0 2px #e91e63, 60px 60px 0 2px #e91e63, 0 0 0 2px #fff; } 100% { box-shadow: 0 -125px 0 2px #e91e63, -125px 0px 0 2px #e91e63, 0px 125px 0 2px #e91e63, 120px 40px 0 2px #e91e63, 0 0 0 2px #fff; }}</style><div class="container"> <div class="shadow">web 秀</div></div></div>

從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)

喜歡小編的點(diǎn)擊關(guān)注，了解更多知識(shí)！

源碼地址和源文件下載請點(diǎn)擊下方“了解更多”