CSS陰影效果

101514 閱讀 0 評論 0 點(diǎn)贊

css陰影效果是我們經(jīng)常使用的一個css屬性，但你有仔細(xì)了解過它嗎？是不是用的時候直接從藍(lán)湖上復(fù)制過來就行了，那你了解它的每個參數(shù)嗎？用陰影又能實現(xiàn)哪些好看的效果呢？

在網(wǎng)頁設(shè)計中常常要使用到陰影效果，通過陰影效果可以很好的突出一個元素，在 CSS3 出現(xiàn)之前，我們想要為文本或者元素添加陰影效果需要借助圖像才能實現(xiàn)，很不方便。而 CSS3 出現(xiàn)之后，我們通過 text-shadow 和 box-shadow 兩個屬性就可以為文本或元素添加陰影效果，不需要借助任何圖像。

1. text-shadow

使用 CSS 的 text-shadow 屬性我們可以為文本設(shè)置陰影效果，屬性的語法格式如下：

text-shadow: offset-x offset-y blur color;

語法說明如下：

（1）offset-x：必填參數(shù)，設(shè)置陰影的水平偏移量，可以為負(fù)值；

（2）offset-y：必填參數(shù)，設(shè)置陰影的垂直偏移量，可以為負(fù)值；

（3）blur：可選參數(shù)，設(shè)置模糊的半徑，值越大，模糊越大，陰影的邊緣越模糊，不允許使用負(fù)值；

（4）color：可選參數(shù)，設(shè)置陰影的顏色，如果省略或未指定該值，則采用 color 屬性的值。

提示：使用 text-shadow 屬性可以同時設(shè)定多組陰影效果，每組之間使用逗號分隔，定義的多組陰影效果會按照定義順序依次羅列，第一個陰影在最上面，以此類推。另外，若要取消文本的陰影效果則可以將 text-shadow 屬性的值設(shè)置為 none。

【示例】使用 text-shadow 屬性為文本添加陰影效果：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>text-shadow</title>
</head>
<style>
  div:first-child {
    text-shadow: 5px 8px 3px red;
  }
</style>
<body>
<div>文字陰影</div>
</body>
</html>

運(yùn)行結(jié)果：

text-shadow

解析：text-shadow: 5px 8px 3px red; 參數(shù)說明

參數(shù)位置	參數(shù)	解釋	例中解釋
1	offset-x	x軸偏移 (讓下面文字左右移動位置)	讓下面文字左移5px
2	offset-y	y軸偏移 (讓下面文字上下移動位置)	讓下面盒子下移8px
3	blur	模糊程度 (控制下面文字的模糊程度)	模糊程度
4	color	顏色 (控制下面文字的顏色)	讓下面文字顏色為紅色

2. box-shadow

使用 CSS 的 box-shadow 屬性我們可以為 HTML 元素設(shè)置陰影效果，屬性的語法格式如下：

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

語法說明如下：

（1）h-shadow：必填參數(shù)，設(shè)置陰影水平方向的偏移量，可以為負(fù)值；

（2）v-shadow：必填參數(shù)，設(shè)置陰影垂直方向的偏移量，可以為負(fù)值；

（3）blur：可選參數(shù)，設(shè)置模糊的半徑，值越大，模糊越大，陰影的邊緣越模糊，不允許使用負(fù)值；

（4）spread：可選參數(shù)，設(shè)置陰影的尺寸；

（5）color：可選參數(shù)，設(shè)置陰影的顏色；

（6）inset：可選參數(shù)，將默認(rèn)的外部陰影 (outset) 改為內(nèi)部陰影。

提示：與 text-shadow 屬性相似，box-shadow 屬性也可以同時設(shè)定多組陰影效果，每組之間使用逗號分隔，定義的多組陰影效果會按照定義順序依次羅列，第一個陰影在最上面，以此類推。

【示例】使用 box-shadow 屬性為文本添加陰影效果：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>box-shadow</title>
</head>
<style>
  div:first-child {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    box-shadow: 5px 8px 3px 2px red;
  }
</style>
<body>
<div></div>
</body>
</html>

運(yùn)行結(jié)果：

box-shadow

解析：box-shadow: 5px 8px 3px 2px red; 參數(shù)說明

參數(shù)位置	參數(shù)	解釋	例中解釋
1	offset-x	x軸偏移 (讓下面盒子左右移動位置)	讓下面盒子左移5px
2	offset-y	y軸偏移 (讓下面盒子上下移動位置)	讓下面盒子下移8px
3	blur	模糊程度 (控制下面盒子的模糊程度)	模糊程度
4	spread	陰影大小 (控制下面盒子的大小)	讓下面盒子寬高各加3px
5	color	顏色 (控制下面盒子的顏色)	讓下面盒子顏色為紅色