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

CSS語法

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

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

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

向文本添加一個(gè)或多個(gè)陰影。該屬性是逗號分隔的陰影列表，每個(gè)陰影有兩個(gè)或三個(gè)長度值和一個(gè)可選的顏色值進(jìn)行規(guī)定。省略的長度是 0。
h-shadow: 必需。水平陰影的位置，可以為負(fù)值
v-shadow:必需。垂直陰影的位置，可以為負(fù)值
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>

同時(shí)添加多個(gè)陰影

<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>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。