CSS中，通過text-shadow、box-shadow兩個屬性分別為文本和元素添加陰影效果。

CSS語法

box-shadow: h-shadow v-shadow blur spread color inset;

向元素添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
h-shadow: 必需。水平陰影的位置，可以為負值
v-shadow:必需。垂直陰影的位置，可以為負值
blur:可選，陰影模糊的距離
spread:可選，陰影的尺寸
color:可選，陰影的顏色
inset:可選，將外部陰影（outset）改為內部陰影

text-shadow: h-shadow v-shadow blur color;

向文本添加一個或多個陰影。該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進行規定。省略的長度是 0。
h-shadow: 必需。水平陰影的位置，可以為負值
v-shadow:必需。垂直陰影的位置，可以為負值
blur:可選，陰影模糊的距離
color:可選，陰影的顏色

簡單示例

只指定水平陰影和垂直陰影

<style> h1 {text-shadow: 2px 2px; } </style> <h1>Hello world!</h1>

效果圖：

給陰影添加顏色

<style> h1 {text-shadow: 2px 2px red; } </style> <h1>Hello world!</h1>

陰影添加模糊效果

<style> h1 {text-shadow: 2px 2px 5px red; } </style> <h1>Hello world!</h1>

同時添加多個陰影

<style> h1 {text-shadow: 2px 2px 5px red, 2px 2px 5px green; } </style> <h1>Hello world!</h1>

借助陰影屬性給文字添加邊框

<style> h1 {text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red; } </style> <h1>Hello world!</h1>

總結

以上是生活随笔為你收集整理的CSS 阴影效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。