CSS3文本陰影厉碟、盒子陰影
在我們平時寫頁面時會遇到一些元素有陰影,內(nèi)容有陰影的頁面效果屠缭,對于初學(xué)者來說可能會用一些背景圖或者定位來解決其中一部分陰影效果箍鼓,但是并不能解決全部,本篇文章給大家介紹一下CSS3文本陰影呵曹、盒子陰影以方便以后遇到陰影效果多一種解決辦法款咖。
在css3里面文本陰影和盒子陰影都是有多個屬性值得,每個屬性值代表的意思都是不同的奄喂,可設(shè)置的值也是不同的
首先介紹的是文本陰影屬性text-shadow:
文本陰影的寫法
text-shadow:20px 20px 20px?burlywood;
text-shadow第一個值
在text-shadow屬性里第一個值代表的是水平方向的距離铐殃,這個值是必須有的而且支持負(fù)值
當(dāng)我們改變第一個值得大小時為正值時陰影會向右發(fā)生移動
為負(fù)值時陰影會向左發(fā)生移動
text-shadow第二個值
在text-shadow屬性里第二個值代表的是垂直方向的距離,這個值是必須有的而且支持負(fù)值
當(dāng)我們改變第二個值得大小時為正值時陰影會向下發(fā)生移動
為負(fù)值時陰影會向上發(fā)生移動
text-shadow第三個值
在text-shadow屬性里第三個值代表的是設(shè)置陰影清晰和模糊程度的值跨新,這個值不支持負(fù)值
當(dāng)我們改變第三個值得大小發(fā)生改變時陰影會隨著值得大小顯示模糊程度
注意富腊,此值不能為負(fù)值當(dāng)為負(fù)值時,text-shadow屬性就會出現(xiàn)問題不顯示了
text-shadow第四個值
在text-shadow屬性里第四個值代表的是設(shè)置陰影顏色的值域帐,這個值支持英文單詞和#的寫法
當(dāng)我們改變第四個值的屬性值時陰影的顏色會隨著我們設(shè)置的顏色來顯示
特別強調(diào):第一個值和第二個值得位置不能互換赘被;
書寫多個文本陰影:
當(dāng)給同一個文字設(shè)置多個陰影的時候,陰影和陰影之間用逗號隔開:
如:text-shadow:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
再次說明:水平肖揣、垂直陰影的位置允許負(fù)值民假,可進行多陰影設(shè)置(逗號分隔的方式)
盒子陰影屬性box-shadow
box-shadow寫法
box-shadow: 10px 10px 10px 10px greenyellow;
box-shadow第一個值
box-shadow的第一個值和文本屬性的第一個值所代表的定義是一樣的
當(dāng)我們改變第一個值得大小時為正值時陰影會向右發(fā)生移動
為負(fù)值是會向左移動
box-shadow第二個值
box-shadow的第二個值和文本屬性的第二個值所代表的定義也是一樣的
當(dāng)我們改變第二個值得大小時為正值時陰影會向下發(fā)生移動
為負(fù)值是會向上移動
box-shadow第三個值
box-shadow的第三個值和文本屬性的第三個值所代表的定義也是一樣的
當(dāng)我們改變第三個值得大小發(fā)生改變時陰影會隨著值得大小顯示模糊程度(此值不可為負(fù)值)
box-shadow第四個值
box-shadow是有5個值的,第四個值代表的是盒子陰影區(qū)域的大小龙优,第五個值代表的才是陰影顏色
當(dāng)我們改變第四個值的時候盒子陰影區(qū)域會隨著我們的改變羊异,而變換大小
此值可以存在負(fù)值,如果負(fù)值過小,會被盒子蓋在下面
box-shadow第五個值
box-shadow第5個值會隨著我們設(shè)置的顏色來改變
box-shadow還有個inset值野舶,這個值是設(shè)置陰影顯示區(qū)域的易迹,表示的是在內(nèi)測顯示,默認(rèn)識外側(cè)顯示
內(nèi)測顯示時默認(rèn)會從上方顯示平道,剛好和外側(cè)相反赴蝇,此時我們把水平和垂直方向的值改為負(fù)值就可以使陰影在下方顯示
同文本陰影當(dāng)給一個盒子設(shè)置多個陰影的時候,陰影和陰影之間用逗號隔開:
box-shadow: 10px 10px 5px 10px #888888 inset巢掺,10px 10px 5px 10px #888888 inset句伶,10px 10px 5px 10px #888888 inset;