課程
/前端開發
/HTML/CSS
/十天精通CSS3
設置陰影的時候怎么確定設置的是哪一條邊框?
2016-08-25
源自:十天精通CSS3 2-2
正在回答
box-shadow:4px 4px 6px #666, /*外陰影右下角*/ ? ?-10px -6px 6px green, ? ? ? ?/*外陰影左上角*/ ? ?4px 4px 4px blue inset, ? ? ?/*內陰影左上角*/ ? ?-5px -5px 6px red inset, ? ? /*內陰影右下角*/ ? ?-8px 10px 4px #4c221b inset, /*內陰影右上角*/ ? ?10px -8px 4px #ff7500 inset; /*內陰影左下角*/
設置陰影時用到:box-shadow:?X軸偏移量?Y軸偏移量?[陰影模糊半徑]?[陰影擴展半徑]?[陰影顏色]?[投影方式];
外部投影:x正值陰影在右邊 負值在左邊,y正值引用是在下邊負值在上邊 通過x y的正負值設置陰影上下左右;
內部投影(inset):與外部投影的方向相反
設置陰影時用到
box-shadow:?X軸偏移量?Y軸偏移量?[陰影模糊半徑]?[陰影擴展半徑]?[陰影顏色]?[投影方式];
其中Y軸偏移量表示垂直陰影的位置,也就是上下兩邊的陰影,如果不能理解的話,可以在代碼編寫時將X軸偏移量設置為0,這樣便于觀察位置
box-shadow:0px?8px?6px?#666?;
此時,會發現下邊有陰影,當Y軸偏移量取負值時,陰影在上面?。
同理,
box-shadow:8px?0px?6px?#666?;
此時,陰影出現在右側。
x正值陰影在右邊 負值在左邊,y正值引用是在下邊負值在上邊 通過x y的正負值設置陰影上下左右
先是x軸方向,然后是y軸方向,最后再看值是負值還是正正值,就可以判斷了
看正負值區分呢呀
舉報
本課程為CSS3入門教程,深刻詳解CSS3知識讓網頁穿上絢麗裝備
1 回答邊框陰影透明度可以設置嗎
4 回答PSD設計稿里有文字陰影,前端怎么確定陰影的值呢?
2 回答模糊半徑和擴展半徑怎么回事?多個外部陰影的時候,右下陰影,左上陰影怎么選擇的?內部陰影能只選擇某一條邊嗎?
2 回答陰影變寬的起始位置
3 回答如何對邊框圖片進行設置?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-11-06
box-shadow:4px 4px 6px #666, /*外陰影右下角*/
? ?-10px -6px 6px green, ? ? ? ?/*外陰影左上角*/
? ?4px 4px 4px blue inset, ? ? ?/*內陰影左上角*/
? ?-5px -5px 6px red inset, ? ? /*內陰影右下角*/
? ?-8px 10px 4px #4c221b inset, /*內陰影右上角*/
? ?10px -8px 4px #ff7500 inset; /*內陰影左下角*/
2016-10-18
設置陰影時用到:box-shadow:?X軸偏移量?Y軸偏移量?[陰影模糊半徑]?[陰影擴展半徑]?[陰影顏色]?[投影方式];
外部投影:x正值陰影在右邊 負值在左邊,y正值引用是在下邊負值在上邊 通過x y的正負值設置陰影上下左右;
內部投影(inset):與外部投影的方向相反
2016-08-28
設置陰影時用到
其中Y軸偏移量表示垂直陰影的位置,也就是上下兩邊的陰影,如果不能理解的話,可以在代碼編寫時將X軸偏移量設置為0,這樣便于觀察位置
此時,會發現下邊有陰影,當Y軸偏移量取負值時,陰影在上面?。
同理,
此時,陰影出現在右側。
2016-08-26
x正值陰影在右邊 負值在左邊,y正值引用是在下邊負值在上邊 通過x y的正負值設置陰影上下左右
2016-08-25
先是x軸方向,然后是y軸方向,最后再看值是負值還是正正值,就可以判斷了
2016-08-25
看正負值區分呢呀