CSS3基础CSS3给元素框添加阴影box-shadow属性

CSS3给元素框添加阴影box-shadow属性

在CSS3里可以通过box-shadow属性给元素块添加周边阴影效果,该属性的语法为:选择器 {box-shadow:[阴影类型] X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影……

阴影类型默认的方式是外阴影,如果设定值为inset,则投影方式为内阴影,inset可以写在这些属性的第一个或最后一个,其它位置是无效的。

阴影水平偏移量(X轴偏移量)其值可以是正值或负值。如果为正值,则阴影在对象的右边,如果为负值,则阴影在对象的左边;

阴影垂直偏移量(Y轴偏移量)其值可以是正值或负值。如果为正值,则阴影在对象的底部,如果为负值,则阴影在对象的顶部。

阴影模糊半径,如果设置的话,只能为正值,如果其值为0,则表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

阴影扩展半径,如果设置的话,其值可以是正值或负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则整个阴影都缩小。

阴影颜色,如果不设定阴影的颜色,浏览器会取默认色,但各个浏览器默认的取色不一定相同,所以建议定义该值,不要省略。

一般情况下,我们设置阴影只需要设置四个值:水平偏移(可取正负),垂直偏移(可取正负),阴影模糊半径和阴影颜色,CSS写法为:

div {box-shadow:4px 4px 5px #333;}

我们来试试给元素块增加一个粉色的阴影:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
#a1 {background:#39D8B8;
width:300px;height:200px;
box-shadow:6px 6px 4px pink;
}
</style>
</head>
<body>
<div id="a1">
</div>
</body>
</html>

浏览这个网页,我们看到div块被添加了粉色的外阴影。

CSS3阴影.png

阴影属性支持同时添加多个阴影,多个阴影之间以逗号隔开,如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
#a1 {margin:20px;background:#39D8B8;
width:300px;height:200px;
box-shadow:5px 5px 6px pink,-5px -5px 6px #999;
}
</style>
</head>
<body>
<div id="a1">
</div>
</body>
</html>

浏览这个网页,我们发现左上角和右下角都增加了不同颜色的阴影。

CSS3多个阴影.png

您可以自己修改阴影属性中的各个值来测试一下阴影的效果出现什么变化。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.sz-kmd.com.cn/css3/24.html