CSS 曲線陰影實(shí)現(xiàn)的示例代碼
發(fā)布時間：2018-06-15 15:15:18 作者：滑滑兔 
我要評論
我要評論我們在瀏覽網(wǎng)頁的時候，有些時候會看到某些區(qū)塊或者某些圖片邊框家里炫酷的陰影，本篇文章主要介紹了CSS 曲線陰影實(shí)現(xiàn)的示例代碼，感興趣的小伙伴們可以參考一下
本文介紹了CSS 曲線陰影實(shí)現(xiàn)的示例代碼，分享給大家，具體如下：
通過對比可以看書“曲線陰影”比“普通陰影”的效果會更加生動。
原理：通過偽元素做出第二層陰影效果。
注意：偽元素的尺寸要比父元素小一點(diǎn)，并且z-index要在最下面。
HTML代碼
<div class="effect">
<h1>曲線陰影</h1>
</div>
CSS代碼
.effect {
width: 70%;
height: 200px;
margin: 50px auto;
background: #fff;
position: relative;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect h1 {
font-size: 20px;
text-align: center;
line-height: 200px;
}
.effect:after, .effect:before {
content: '';
background: #fff;
position: absolute;
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
border-radius: 100px/10px;
z-index: -1;
}
想讓陰影過度得更自然，可以在父元素上面設(shè)置內(nèi)陰影。
如果偽元素做出來的陰影不夠深，可以調(diào)整不透明度，也可以設(shè)置多一個偽元素。這里我設(shè)置了:after和:before。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了CSS 陰影動畫優(yōu)化技巧,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-31
JS+css3實(shí)現(xiàn)帶陰影可點(diǎn)擊旋轉(zhuǎn)的3D立體杯子效果源碼
這是一款基于JS+css3實(shí)現(xiàn)帶陰影可點(diǎn)擊旋轉(zhuǎn)的3D立體杯子效果源碼。畫面上依次擺放著白、紅、藍(lán)三個顏色的杯子，點(diǎn)擊各個杯子可看到杯子原地轉(zhuǎn)動，并且顯露出杯子背面的圖案2019-10-15
CSS陰影效果的比較之drop-Shadow與box-Shadow
這篇文章主要介紹了CSS陰影效果的比較之drop-Shadow與box-Shadow，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2019-05-23
這篇文章主要介紹了CSS 翹邊陰影的實(shí)現(xiàn)代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-15
這篇文章主要介紹了css實(shí)現(xiàn)懸浮效果的陰影的方法示例的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-23
這篇文章主要介紹了css實(shí)現(xiàn)多邊形和梯形盒陰影技巧的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-20
本文通過實(shí)例代碼給大家介紹了CSS中使用文本陰影與元素陰影效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-01-18
