1. 程式人生 > 其它 >CSS3 box-shadow盒子陰影

CSS3 box-shadow盒子陰影

inset | offset-x | offset-y | blur-radius | spread-radius | color

陰影在邊框內 x軸 y軸 模糊半徑 擴散半徑 陰影顏色

inset: 預設陰影在邊框外。使用 inset 後,陰影在邊框內

offset-x:水平偏移量:(如果是負值則陰影位於元素左邊)

offset-y:垂直偏移量:(如果是負值則陰影位於元素上面)

offset-x和offset-y 兩者都是0,那麼陰影位於元素後面

blur-radius:值越大,模糊面積越大,陰影就越大越淡。 不能為負值(預設為0,此時陰影邊緣銳利。)

spread-radius: 取正值時,陰影擴大;取負值時,陰影收縮(預設為0,此時陰影與元素同樣大。)

	     /* x軸 y軸 陰影顏色*/
             box-shadow: 6px -5px #ccc; 

             /* x軸 y軸 模糊半徑 陰影顏色*/
             box-shadow: 6px -5px 5px red; 


            /* x軸 y軸 模糊半徑 擴散半徑 陰影顏色*/
             box-shadow: 1px 1px -5px 2px red; 

            /* inset: 陰影在邊框內 */
            box-shadow: inset -10px 1px 3px red;