CSS怎么實(shí)現(xiàn)層疊上下文、單側(cè)投影和半透明邊框效果

這篇文章主要介紹了CSS怎么實(shí)現(xiàn)層疊上下文、單側(cè)投影和半透明邊框效果的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS怎么實(shí)現(xiàn)層疊上下文、單側(cè)投影和半透明邊框效果文章都會有所收獲，下面我們一起來看看吧。

層疊上下文

邊框內(nèi)圓角

clip-path

自適應(yīng)的橢圓

自適應(yīng)寬度

投影模擬多重邊框

第二個參數(shù)使陰影整體下移 5px ，第三個參數(shù)使陰影四周多了 4px 的高斯模糊（注意由于整體下移了 5px，所以此時上方還是沒有陰影露出的），第四個參數(shù)又把陰影整體縮小了 4px，，所以左右兩邊才沒有出現(xiàn)模糊半徑導(dǎo)致的高斯模糊陰影色，從而實(shí)現(xiàn)單側(cè)投影。

單側(cè)投影

還可以逗號分隔設(shè)置多個陰影色，比如下面的兩側(cè)投影效果：地址

單側(cè)投影

不規(guī)則投影

前端開發(fā)大都了解糊濾的高斯模鏡效果是filter: blur()實(shí)現(xiàn)的，但是卻很少使用濾鏡的其他幾個調(diào)色效果。filter 的值有blur()、drop-shadow()、url()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()～～可以使用復(fù)合形式如：filter: sepia(1) saturate(4)等。下面是filter屬性值大集合：地址

濾鏡的染色和褪色效果

餅圖的 css 實(shí)現(xiàn)方案非常奇怪，所以我忽略之。推薦使用 svg 的實(shí)現(xiàn)方案，非常簡單，先來個基本教學(xué)吧～

先畫個圓：

這里 r="25" 是半徑25， cx cy 分別表示圓心的 x y 坐標(biāo)。

這里給圓形定義了一個寬度 40 的描邊:

餅圖 svg

再把描邊設(shè)為線段長度 20 間隔 10 的虛線：

當(dāng)把虛線的間隔設(shè)定為大于等于圓周時，虛線的線段長度就是一個扇形區(qū)域（當(dāng)線段長度等于圓周時扇區(qū)達(dá)到100%）：

給 svg 設(shè)置圓角和背景色，并旋轉(zhuǎn) -90deg ，就可以實(shí)現(xiàn)一個餅圖：地址（使用currentColor關(guān)鍵字和color: inherit 是為了實(shí)現(xiàn)DRY原則。）

但是這樣的餅圖其扇區(qū)大小是不易計算的，為了方便計算，可以讓虛線的線段長度同時也是圓周無限接近100，這樣就可以更方便的設(shè)置扇區(qū)的百分比。圓周是 2πr ，所以 100 = 2πr ，計算得出半徑 r 近似值 16。再利用 svg 的 viewBox 屬性，實(shí)現(xiàn)自適應(yīng)容器大小的餅圖：地址

這種方法有個弊端，就是當(dāng)設(shè)置 stroke-dasharray: 100 100 時會有一條縫，這是取近似值無法避免的。

background 是我們最常用的屬性之一，但作為一個老前端，我也只能羞恥的說我目前并沒有完全掌握這個屬性。

background 是一個簡寫屬性，可以包括多個屬性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、background-attachment。接下來我們一個個來看看這些屬性的作用：

簡寫時 background-size 只能緊接著 background-position 出現(xiàn)，以 / 分割，如： "center / 80%"。

半透明邊框

背景定位

background-position 設(shè)為百分比值較為復(fù)雜。百分比值實(shí)際上執(zhí)行了以下的計算公式:

由計算公式可知：當(dāng)值為0%時，實(shí)際偏移值為0px，此時圖片的左邊界（或上邊界）和容器的左邊界（或上邊界）重合；當(dāng)值為50%時，實(shí)際偏移值為容器減圖片剩余空間的一半，圖片左右邊界（或上下邊界）距離容器左右邊界（或上下邊界）相等，此時圖片的中點(diǎn)和容器的中點(diǎn)重合。當(dāng)值100%時，實(shí)際偏移值為容器減圖片的剩余空間，所以此時圖片的右邊界（或下邊界）和容器的右邊界（或下邊界）重合。二者之差為負(fù)值時同樣有效。地址

背景定位

條紋背景

也可以設(shè)置為垂直條紋背景：

還可以設(shè)置為斜向條紋：

垂直條紋背景

斜向條紋需要設(shè)置四條條紋才能在平鋪到時候做到無縫拼接。

更好的斜向條紋：(這里必須設(shè)置起始值#fb3 0)

更好的斜向條紋

網(wǎng)格

更好的網(wǎng)格：

更好的網(wǎng)格

棋盤

折角

到這里 background 屬性基本講完了，光看無用，多動手實(shí)踐吧。

波點(diǎn)

切角

餅圖

animation 屬性是 animation-name、animation-duration、 animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state屬性的一個簡寫屬性形式。

如何給動畫加上回彈效果呢？這里介紹一種最便利的方法：

回彈效果

上圖圖橫軸為時間，縱軸為動畫進(jìn)度。圖中貝塞爾曲線有兩個控制手柄，x1, y1 控制第一個錨點(diǎn)，x2, y2控制第二個錨點(diǎn)。其中 x1 、x2 不能大于/小于 1，但是y1, y2 可以。當(dāng) y2 大于 1 時，就會產(chǎn)生提前到達(dá)終點(diǎn)，然后超過終點(diǎn)，然后再返回終點(diǎn)的效果，像回彈一樣。地址

transition 屬性是 transition-property、transition-duration、transition-timing-function、transition-delay的一個簡寫屬性。使用 transition 同樣可以實(shí)現(xiàn)回彈效果：地址

關(guān)于“CSS怎么實(shí)現(xiàn)層疊上下文、單側(cè)投影和半透明邊框效果”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“CSS怎么實(shí)現(xiàn)層疊上下文、單側(cè)投影和半透明邊框效果”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。