CSS教程:CSS3属性box-shadow的应用

文章目录

自从html5以及CSS3面试以来,如今在互联网建站上得到了很大程度的应用,不仅优化了过去的臃肿代码,而且为网站添加了更多的特色属性。这篇文章暗淡的黑给大家介绍下CSS3属性中的一个个性效果:box-shadow边框阴影。

定义和用法

box-shadow 属性向框添加一个或多个阴影,box-shadow支持四个参数,分别是x-offset(x轴偏移)、y-offset(y轴偏移)、blur(模糊值)、color of shadow(阴影颜色)。

实际用途

其实大家在查看html5+css3编写的网站源码时,会经常看到box-shadow的应用,他一般用于:为网站导航栏添加阴影。下面我们就写一个简单的例子来看下效果图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:500px;
height:100px;
background-color:#333333;
-moz-box-shadow: 10px 10px 5px #888888; /* 兼容旧版本Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

CSS3属性box-shadow的应用

文件信息:
文件名称:CSS3属性box-shadow的应用源代码
分类目录:html+css教程
更新时间:2014年1月3日22:10:58
关于广告:麻烦大神们小手一抖,点击【下载列表】页面中的广告,感谢!
下载地址:360网盘百度网盘
声明:本站除特别声明外,均为本站原创,转载请注明出处:暗淡的黑IT网络,谢谢!