CSS3 box-shadow盒子陰影
阿新 • • 發佈:2022-03-09
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;