您的位置:首页> 前端教程> CSS3教程
文章导航

CSS box-shadow

2019-9-17 08:54| 作者: admin| 查看: 2311| 评论: 0|来自: 蚂蚁部落

 box-shadow属性理解和应用起来稍稍有一点难度,只要切入点得当,还是比较容易掌握的。

属性的命名必然和其功能有内在联系,从名称进行理解,box-shadow可以分拆为两个单词:

(1).box:盒容器,例如div或者p创建的容器盒子。

(2).shadow:影子,这里更准确的说是投影。

由此大致得出此属性核心作用使用规定元素的投影效果。

 box-shadow属性与text-shadow属性类似,具体参阅CSS3 text-shadow一章节。

语法结构:

[CSS] 纯文本查看 复制代码
box-shadow:h-shadow v-shadow blur spread color inset;

参数解释:

(1).h-shadow:必需,设置元素阴影水平偏移量,可以为负值,单位是像素。

(2).v-shadow:必需,设置元素阴影垂直偏移量,可以为负值,单位是像素。

(3).blur:可选,阴影模糊半径,只能够为正值,如果为0,表示不具有模糊效果,单位像素。

(4).spread:可选,阴影的扩展半径尺寸,可以为负值,单位是像素。

(5).color:可选,设置阴影的颜色;省略此参数,浏览器选取默认颜色,浏览器的默认可能不同,有的为透明。

(6).inset:可选,可以将外部阴影改为内部阴影。

特别说明:blur和spread较为复杂一些,具体参阅box-shadow 模糊半径与扩展半径一章节。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px;
  background-color:green;
  box-shadow:50px 50px;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上代码只设置了阴影的水平和垂直偏移量,并没有模糊效果,同时没有设置阴影的颜色,那么浏览器就会选取默认颜色,各个浏览器之间会有所不同,有的是黑色,有的是透明,不建议缺省此属性。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px;
  background-color:green;
  box-shadow:50px 50px red;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上代码设置了div的阴影偏移量和阴影的颜色。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px;
  background-color:green;
  box-shadow:50px 50px 10px red;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上代码设置了div阴影的水平和垂直偏移量、模糊半径和阴影的颜色。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px;
  background-color:green;
  box-shadow:50px 50px 10px 10px red;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上代码设置了div阴影的水平和垂直偏移量、模糊半径、阴影扩展半径和阴影的颜色。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px;
  background-color:green;
  box-shadow:30px 10px 10px 10px red inset;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上代码可以给div设置为内阴影,并且设置了其他参数。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px;
  background-color:green;
  box-shadow:30px 10px 10px 10px red,10px 20px 15px 10px blue;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

可以设置多重阴影效果,每组数据用逗号分隔即可。

特别说明

(1).阴影的层叠优先级从左向右递减,也就是左侧的能够覆盖右侧的;同时阴影层叠优先级低于元素内容层。

(2).对于外部阴影,优先级低于background-color图层,内部阴影则相反。

元素各层图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/011355kl2swiyl62w6irhx.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

扩展阅读:box-shadow不占据空间一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部