一、box-shadow属性简介

在CSS2.1中,如果想要为元素添加边框阴影,也是只能使用背景图片的方式来实现。在CSS3中,我们可以使用box-shadow属性轻松为元素添加阴影效果。

语法:

box-shadow:x-offset y-offset blur spread color style;

说明:

box-shadow属性的参数非常多,每一个参数说明如下。

  • (1)x-offset:定义水平阴影的偏移距离,可以使用负值。由于CSS3采用的是W3C坐标系,因此x-offset取值为正时,向右偏移;取值为负时,向左偏移。
  • (2)y-offset:定义垂直阴影的偏移距离,可以使用负值。由于CSS3采用的是W3C坐标系,因此y-offset取值为正时,向下偏移;取值为负时,向上偏移。
  • (3)blur:定义阴影的模糊半径,只能为正值。
  • (4)spread:定义阴影的大小。
  • (5)color:定义阴影的颜色。
  • (6)style:定义是外阴影还是内阴影。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:200px; height:100px; border:1px solid silver; box-shadow:5px 5px 8px 0px red; } </style> </head> <body> <div></div> </body> </html>

浏览器预览效果如下图所示。

分析:

box-shadow:5px 5px 8px 0px red;表示阴影的水平偏移距离为5px,垂直偏移距离为5px,模糊半径为8px,阴影大小为0px,阴影颜色为red。

1.偏移距离:x-offset和y-offset

对于box-shadow属性来说,x-offset用于定义水平阴影的偏移距离,y-offset用于定义垂直阴影的偏移距离。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:200px; height:100px; border:1px solid silver; box-shadow:-5px -5px 8px 0px red; } </style> </head> <body> <div></div> </body> </html>

浏览器预览效果如下图所示。

分析:

小伙伴们可以自行测试一下,看看x-offset和y-offset分别设置为正数或负数时,阴影的方向有什么不同。

2.模糊半径:blur

对于box-shadow属性来说,blur用于定义阴影的模糊半径。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:200px; height:100px; border:1px solid silver; box-shadow:5px 5px 0px 0px red; } </style> <script> window.onload = function(){ var oInput = document.getElementsByTagName("input")[0]; var oSpan = document.getElementsByTagName("span")[0]; var oDiv = document.getElementsByTagName("div")[0]; oInput.onchange = function(){ var value = this.value; oSpan.innerText = value; oDiv.style.boxShadow = "5px 5px " + value + "px 0px red"; }; } </script> </head> <body> <input type="range" min="0" max="25" value="0"> <span>0</span> <div></div> </body> </html>

浏览器预览效果如下图所示。

分析:

在这个例子中,当我们拖动滑动条时,可以动态地观察blur变化时阴影形态的变化。

3.阴影大小:spread

对于box-shadow属性来说,blur用于定义阴影的尺寸大小。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:200px; height:100px; border:1px solid silver; box-shadow:5px 5px 0px 0px red; } </style> <script> window.onload = function(){ var oInput = document.getElementsByTagName("input")[0]; var oSpan = document.getElementsByTagName("span")[0]; var oDiv = document.getElementsByTagName("div")[0]; oInput.onchange = function(){ var value = this.value; oSpan.innerText = value; oDiv.style.boxShadow = "5px 5px 0px " + value + "px red"; }; } </script> </head> <body> <input type="range" min="0" max="25" value="0"> <span>0</span> <div></div> </body> </html>

浏览器预览效果如下图所示。

分析:

在这个例子中,当我们拖动滑动条时,可以动态地观察spread变化时阴影形态的变化。注意,这两个例子代码相似,但是每次改变的对象是不一样的。

4.内外阴影:style

对于box-shadow属性来说,参数style用于定义是内阴影还是外阴影。其中,style取值有两种:outset和inset。当取值为outset时(默认值),表示外阴影;当取值为inset时,表示内阴影。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:100px; height:100px; line-height:100px; text-align:center; margin-top:10px; } #div1{box-shadow:0 0 12px 0px red;} #div2{box-shadow:0 0 12px 0px red inset;} </style> </head> <body> <div id="div1">外阴影</div> <div id="div2">内阴影</div> </body> </html>

浏览器预览效果如下图所示。

分析:

默认情况下,边框阴影是外阴影效果。不过我们可以设置最后一个属性值为inset,从而变为内阴影效果。这里要注意一个技巧,当x-offset和y-offset都为0时,阴影都是向外发散或者向内发散。之前很多初学的小伙伴想要实现这种效果,纠结半天也找不到解决方法,就是因为不知道这个小技巧。

二、个方向阴影独立样式

我们可以使用box-shadow属性为4个方向的边框定义独立的阴影效果。其中每条边的阴影属性值之间用英文逗号隔开。

语法:

box-shadow:左阴影, 上阴影, 下阴影, 右阴影;

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{padding:100px;} div { width:100px; height:100px; line-height:100px; text-align:center; box-shadow:-5px 0 12px red, 0 -5px 12px yellow, 0 5px 12px blue, 5px 0 12px green; } </style> </head> <body> <div></div> </body> </html>

浏览器预览效果如下图所示。

分析:

小伙伴们好好琢磨一下这个例子中的x-offset和y-offset是怎么取值的。