CSS中設(shè)置陰影可以使用box-shadow屬性,它可以給元素添加陰影效果。box-shadow屬性有幾個參數(shù)可以設(shè)置,可以根據(jù)需要進行修改。
/* 同時設(shè)置水平和垂直偏移量、模糊半徑、擴展半徑和顏色 */ box-shadow: h-shadow v-shadow blur spread color;
下面是每個參數(shù)的含義:
- h-shadow:水平陰影的位置,必須是負值向左移動,正值向右移動。
- v-shadow:垂直陰影的位置,必須是負值向上移動,正值向下移動。
- blur:模糊半徑,也就是陰影的模糊程度,值越大陰影越模糊。
- spread:陰影的擴展半徑,如果值為正,則陰影擴展,如果值為負,則陰影收縮。
- color:陰影的顏色,默認為黑色。
下面是一個示例代碼:
.box { box-shadow: 10px 10px 5px 1px rgba(0, 0, 0, 0.4); }
上面的代碼表示,相對于元素向右移動10像素和向下移動10像素,陰影模糊半徑為5像素,擴展半徑為1像素,顏色為rgba(0, 0, 0, 0.4)即半透明的黑色。
可以根據(jù)需求調(diào)整陰影的位置、模糊程度和顏色,讓頁面效果更加酷炫。