css中 box-shadow陰影屬性的復(fù)合寫法及高級(jí)用法詳解
我要評(píng)論前言：最近又叕看到了一個(gè)好看的特效，隨后整理了一下，發(fā)現(xiàn)實(shí)現(xiàn)起來(lái)主要靠一個(gè)css屬性就實(shí)現(xiàn)了，有一次刷新了我對(duì)css強(qiáng)大的認(rèn)知??，這個(gè)屬性就是box-shadow，平常我們用到的比較少，但是針對(duì)于C端可能使用就多了，但是你們真正掌握了它的使用嗎？讓我這一文帶你深度了解box-shadow
box-shadow屬性介紹及用法
box-shadow可以為元素的框架添加陰影效果，這個(gè)屬性可以設(shè)置多個(gè)陰影效果，每個(gè)陰影效果之間用逗號(hào)分隔。box-shadow屬性可以設(shè)置的值包括陰影的X軸偏移量、Y軸偏移量、模糊半徑、擴(kuò)散半徑和顏色
基本使用
平常使用我們都是box-shadow：第一個(gè)值 第二個(gè)值 第三個(gè)值 第四個(gè)值；每個(gè)值后面用空格隔開
- 第一個(gè)值：陰影往X軸的偏移距離
- 第二個(gè)值：陰影往Y軸偏移的距離
- 第三個(gè)值：陰影模糊的半徑，值越大陰影越模糊
- 第四個(gè)值：陰影的顏色可以使用十六進(jìn)制也可以使用rgba()寫法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
// box盒子陰影X軸便宜10像素Y軸偏移10像素，模糊半徑為20像素，顏色為#ccc
.box{
margin: 100px auto;
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
background-color: rgb(151, 211, 151);
box-shadow: 10px 10px 20px #ccc;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
高級(jí)使用
五個(gè)值
box-shadow其實(shí)有五個(gè)值，如果有五個(gè)值的情況，那第四個(gè)值就不再是顏色了，而第五個(gè)值是顏色，第四個(gè)值表示的是陰影的半徑大小，值越大陰影越大
<style>
.box{
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
background-color: rgb(77, 255, 0);
box-shadow: 10px 10px 20px 30px #ccc;
}
</style>
inset（六個(gè)值）
當(dāng)使用了inset的時(shí)候變成了六個(gè)值，陰影將不再是對(duì)外擴(kuò)散，相反是網(wǎng)內(nèi)出現(xiàn)內(nèi)陰影，而且第五個(gè)值（五個(gè)值時(shí)的第四個(gè)值）數(shù)值越大陰影往內(nèi)擴(kuò)散越大，直到鋪滿盒子，數(shù)值在變大陰影也不會(huì)出現(xiàn)變化了
多個(gè)陰影
除了可以控制內(nèi)陰影還是外陰影以外，還可以使用 ，來(lái)進(jìn)行間隔實(shí)現(xiàn)多個(gè)陰影效果
<style>
.box{
margin:100px auto;
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
background-color: aqua;
box-shadow: 0 0 20px #fff,20px 0 80px #f0f,-20px 0 80px #0ff,inset 0 0 50px #fff,inset 200px 0 80px #f0f;
}
</style>
一個(gè)好看的小球這不就出來(lái)了??????
關(guān)鍵字
而且box-shadow還有幾個(gè)特殊的關(guān)鍵字
- inherit：將CSS屬性的值設(shè)置為其父元素的值。
- initial：將CSS屬性的值重置為其默認(rèn)值。
- revert：將CSS屬性的值重置為其父元素的值（如果該屬性是繼承屬性），或者重置為其默認(rèn)值（如果該屬性不是繼承屬性）。
- revert-layer：將CSS屬性的值重置為其父元素的值（如果該屬性是繼承屬性），或者重置為其默認(rèn)值（如果該屬性不是繼承屬性）。與revert相比，它還會(huì)重置元素上所有層疊上下文中該屬性的值。
- unset：將CSS屬性的值設(shè)置為其父元素的值（如果該屬性是繼承屬性），或者重置為其默認(rèn)值（如果該屬性不是繼承屬性）。
具體解釋意思就是
- box-shadow: inherit;會(huì)將元素的box-shadow設(shè)置為其父元素的box-shadow；
- box-shadow: initial;會(huì)將元素的box-shadow設(shè)置為其默認(rèn)值；
- box-shadow: revert;會(huì)將元素的box-shadow設(shè)置為其父元素的box-shadow（如果該屬性是繼承屬性），或者重置為其默認(rèn)值（如果該屬性不是繼承屬性）；
- box-shadow: revert-layer;會(huì)將元素上所有層疊上下文中box-shadow的值重置為其父元素的box-shadow（如果該屬性是繼承屬性），或者重置為其默認(rèn)值（如果該屬性不是繼承屬性）；
- box-shadow: unset;會(huì)將元素的box-shadow設(shè)置為其父元素的box-shadow（如果該屬性是繼承屬性），或者重置為其默認(rèn)值（如果該屬性不是繼承屬性
加個(gè)動(dòng)畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #000;
}
.box{
margin: 100px auto 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
animation: redBall 6s linear infinite;
background-color: rgb(0, 13, 255);
box-shadow: 0 0 20px #fff,20px 0 80px rgb(0, 255, 191),-20px 0 80px rgb(0, 255, 81),inset 0 0 50px #fff,inset 200px 0 80px rgb(255, 234, 0);
}
@keyframes redBall{
0%{
box-shadow: 0 0 20px #fff,20px 0 80px rgb(0, 255, 213),-20px 0 80px rgb(72, 255, 0),inset 0 0 50px #fff,inset -200px 0 80px rgb(0, 64, 255);
}
50%{
box-shadow: 0 0 20px #fff,20px 0 80px rgb(0, 242, 255),-20px 0 80px rgb(17, 255, 0),inset 0 0 50px #fff,inset 0px 0 80px rgb(255, 0, 55);
}
100%{
box-shadow: 0 0 20px #fff,20px 0 80px rgb(179, 255, 0),-20px 0 80px #0ff,inset 0 0 50px #fff,inset 200px 0 80px rgb(255, 0, 21),inset 10px 0 80px #0ff;
}
}
</style>
<body>
<div class="box"></div>
</body>
</html>實(shí)現(xiàn)動(dòng)態(tài)效果 (先錄屏然后制作的gif圖，會(huì)比較模糊，大家將就看吧)
總結(jié)：以上就是我對(duì)box-shadow屬性的所有總結(jié)，希望對(duì)伙伴們有所幫助，學(xué)會(huì)一個(gè)算一個(gè)，喜歡的同學(xué)們可以一鍵三連，希望與大家共同分享共同進(jìn)步，當(dāng)然有什么問(wèn)題也歡迎大家及時(shí)指正????
到此這篇關(guān)于css中 box-shadow陰影屬性的復(fù)合寫法及高級(jí)用法的文章就介紹到這了,更多相關(guān)css box-shadow陰影屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
Box-shadow屬性是css效果非常實(shí)用的修飾效果，可以在很多地方見到它的影子，這篇文章主要介紹了css陰影詳解之Box-shadow修飾性屬性詳解,需要的朋友可以參考下2024-08-13
這篇文章主要介紹了CSS3里box-shadow屬性的使用方法示例詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧需要的朋友可以參2020-07-03
CSS陰影效果的比較之drop-Shadow與box-Shadow
這篇文章主要介紹了CSS陰影效果的比較之drop-Shadow與box-Shadow，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2019-05-23
css box-shadow實(shí)現(xiàn)曲邊陰影與翹邊陰影
這篇文章主要介紹了css box-shadow實(shí)現(xiàn)曲邊陰影與翹邊陰影,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-05Photoshop投影與CSS中box-shadow的轉(zhuǎn)換
box-shadow是給元素塊添加周邊陰影效果，本文給大家介紹Photoshop投影與CSS中box-shadow的轉(zhuǎn)換，對(duì)css中box shadow相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-27CSS偽元素 :before, :after, box-shadow應(yīng)用
利用CSS偽元素 ：before 和 ：after 可以在文檔前后插入內(nèi)容而不改變文檔原有結(jié)構(gòu)，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-03-04ie-css3.htc 讓IE6, 7, and 8也支持box-shadow
IE6/7并不支持CSS3的屬性，IE8也不能很好的支持CSS3。如何讓IE 6/7/8支持border-radius (rounded)，box-shadow ( shadow)，text-shadow等這些屬性呢？這里介紹一個(gè)通過(guò)htc2012-10-12- 你在使用box-shadow來(lái)實(shí)現(xiàn)陰影效果的時(shí)候，有沒(méi)有注意到有些情況下，陰影并不是透明的效果2011-08-28
CSS text-shadow，box-shadow，border-radius屬性
篇文章將對(duì) CSS 的幾個(gè)新屬性 (text-shadow，box-shadow，and border-radius) 做基本介紹。這些 CSS3 屬性通常用來(lái)加強(qiáng)頁(yè)面布局。2010-03-09
