box-shadow
語法
- 陰影水平偏移量x 水平偏移量y 顏色color
box-shadow: 60px -16px teal; - x y 陰影模糊程度blur-radius color
box-shadow: 10px 5px 5px black; - x y blur-radius 陰影擴散程度spread-radius color
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); - 陰影在邊框內inset x y color
box-shadow: inset 5em 1em gold;
值
<inset>
概述
- 默認陰影在邊框外。
- 使用inset后鸟款,陰影在邊框內(即使是透明邊框)篇梭,背景之上內容之下祥诽。
<offset-x> <offset-y>
- 這是頭兩個 <length> 值,用來設置陰影偏移量框喳。<offset-x> 設置水平偏移量癣蟋,如果是負值則陰影位于元素左邊辫狼。 <offset-y> 設置垂直偏移量桂肌,如果是負值則陰影位于元素上面数焊。
- 如果兩者都是0,那么陰影位于元素后面崎场。這時如果設置了<blur-radius> 或<spread-radius> 則有模糊效果佩耳。
<blur-radius>
- 這是第三個 <length> 值。值越大谭跨,模糊面積越大蚕愤,陰影就越大越淡。 不能為負值饺蚊。默認為0,此時陰影邊緣銳利悬嗓。
<spread-radius>
這是第四個 <length> 值污呼。取正值時,陰影擴大包竹;取負值時燕酷,陰影.收縮籍凝。默認為0,此時陰影與元素同樣大苗缩。
<color>
相關事項查看 <color> 饵蒂。如果沒有指定,則由瀏覽器決定——通常是color的值酱讶,不過目前Safari取透明退盯。