本篇，我們要講的是CSS3中經(jīng)常被使用來開發(fā)頁面模糊陰影效果的box-shadow屬性和text-shadow屬性橙弱。
在前端開發(fā)過程中，我們常常會(huì)看見這種效果：
box-shadow陰影效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shadow</title>
<style>
.box {
height: 100px;
width: 200px;
border: 1px ridge silver;
}
.shadow1 {
box-shadow: 4px 4px 6px 1px gray;
}
</style>
</head>
<body>
<div class="box shadow1"></div>
</body>
</html>
這種陰影效果就是使用CSS3box-shadow屬性實(shí)現(xiàn)衡怀。
box-shadow
box-shadow屬性向框元素添加一個(gè)或多個(gè)陰影效果装畅。
-
語法：
box-shadow: [inset] x-offset y-offset [blur] [spread] [color]; 屬性
| 屬性 | 說明 |
|---|---|
| inset | 可選，將默認(rèn)的外陰影設(shè)置為內(nèi)陰影蓝纲。 |
| x-offset | 必需，水平方向陰影偏移量晌纫，可為負(fù)值税迷。 |
| y-offset | 必需，垂直方向上陰影偏移量锹漱，可為負(fù)值箭养。 |
| blur | 可選 ，陰影模糊半徑哥牍，不可為負(fù)值毕泌。 |
| spread | 可選喝检，陰影延展半徑，可為負(fù)值撼泛。 |
| color | 可選挠说，陰影顏色 |
陰影偏移量
box-shadow陰影偏移量可正可負(fù)，為正值時(shí)則向右或下偏移愿题，如下：
- 正水平偏移量陰影
正水平偏移量陰影
- 負(fù)水平偏移量陰影
負(fù)水平偏移量陰影
- 正垂直偏移量陰影
正垂直偏移量陰影
- 負(fù)垂直偏移量陰影
負(fù)垂直偏移量陰影
模糊半徑
- 正模糊半徑陰影
正模糊半徑陰影
- box-shadow不支持負(fù)模糊半徑
延展半徑
-
正延展半徑
正延展半徑向外延展陰影半徑
正延展半徑陰影
-
負(fù)延展半徑
負(fù)延展半徑向內(nèi)收縮陰影半徑
負(fù)延展半徑陰影1
負(fù)延展半徑陰影2
text-shadow
text-shadow 屬性向文本設(shè)置陰影损俭。
文本陰影
-
語法
text-shadow: x-offset y-offset blur color; 屬性
| 屬性 | 說明 |
|---|---|
| x-offset | 必需，水平方向陰影偏移量潘酗，可為負(fù)值杆兵。 |
| y-offset | 必需，垂直方向上陰影偏移量仔夺，可為負(fù)值琐脏。 |
| blur | 可選 ，陰影模糊半徑囚灼，不可為負(fù)值骆膝。 |
| color | 可選祭衩，陰影顏色 |
