樣式代碼:1、文本陰影樣式“text-shadow: h-shadow v-shadow blur color;”;2、邊框陰影樣式“box-shadow: h-shadow v-shadow blur spread color inset;”;3、圖片陰影樣式“filter:drop-shadow(h-shadow v-shadow blur spread color);”。
前端(vue)入門到精通課程:進入學習
API 文檔、設(shè)計、調(diào)試、自動化測試一體化協(xié)作工具:點擊使用
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在html中,有三種方法可以給元素添加陰影樣式:
-
文本陰影:使用text-shadow屬性
-
邊框陰影:使用box-shadow屬性
-
圖片陰影:使用filter屬性(需要和drop-shadow()函數(shù)一起使用)
1、文本陰影樣式
在html中,可使用text-shadow屬性來實現(xiàn)帶陰影的文本,text-shadow 屬性應用于陰影文本。
語法
text-shadow: h-shadow v-shadow blur color;
值 | 描述 |
---|---|
h-shadow | 必需。水平陰影的位置。允許負值。 |
v-shadow | 必需。垂直陰影的位置。允許負值。 |
blur | 可選。模糊的距離。 |
color | 可選。陰影的顏色。 |
注意: text-shadow屬性連接一個或