HTML5培训

css3盒模型阴影详解

发布时间:2013年 08月 20日   |  作者:衣琳琳

上篇文章介绍css3圆角效果,这里继续介绍css3盒模型阴影的实现。

box-shadow:<length> <length> <length>? <length>? || <color>。

box-shadow相对比较容易理解。可跟5个属性,分别是  length,length,length,length和color。

 第一个length表示在阴影在x轴的偏移量,可以是负值,负值就是阴影左偏了。必选项。

 第二个length表示在阴影在y轴的偏移量,可以是负值,负值就阴影是上偏了。必选项。

第三个length表示阴影模糊半径,数值越大,模糊区域越大。模糊半径有一半是从阴影内开始,另一半则在阴影之外。可选项。

第四个length表示阴影扩展范围,相当于在原阴影的基础上加一个border。可选项。

最后一个属性color,表示阴影的颜色,可以用css3新增的rgba的方式设置,即在原来的颜色设置上增加了透明度设置。

先看实例:

我们设置一个宽高各100px的盒子,加10px的边框,即其所占区域大小是120*120px。让他的投影横移120px。看效果。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {border:10px blue solid;border-radius:50%;height:100px;width:100px;text-align:center;line-height:100px;margin:50px auto;
box-shadow:120px 0 red;}
</style>
<title>test</title>
</head>
<body>
    <div>test</div>
</body>
</html>


效果如图:


 还是上例代码,阴影正压在盒子下面,但是让阴影扩展10px。看下效果。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {border:10px blue solid;border-radius:50%;height:100px;width:100px;text-align:center;line-height:100px;
box-shadow:0 0 0 10px red;margin:50px auto;}
</style>
<title>test</title>
</head>
<body>
    <div>test</div>
</body>
</html>


效果图如下图:

为了让阴影圆滑些,我们在上例的基础上,让阴影模糊范围5px,颜色半透明

box-shadow:0 0 5px 10px rgba(255,0,0,0.8);效果图为


盒模型的阴影除了向外投影外,还可以通过inset属性控制向内投影。


box-shadow:inset 0 0 5px 10px rgba(255,0,0,0.8);


这里所有的设置属性还是跟上面一样,不过是投影方向一个靠内 ,一个靠外。

对一个盒子可以进行多次阴影设置,使用逗号做分割,如果两次设置的阴影有重叠部分。前一个设置的阴影颜色会叠压在后一个设置的阴影上面。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {border-radius:50%;height:100px;width:100px;text-align:center;line-height:100px;
box-shadow:0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;margin:50px auto;}
</style>
<title>test</title>
</head>
<body>
    <div>test</div>
</body>
</html>


效果如图:

对于css3的投影,就这么多了~


相关文章
less语言特性(一) ——
CSS3的Transform-style和Perspe
CSS3 Grid布局
css3制作圆形播放进度条
跨平台开发常用CSS3设置
CSS3跨平台开发之文本遮罩
其他文章
提高网页加载速度---CSS
less语言特性(二) ——
less语言特性(一) ——
JavaScript中的一些坑
移动端性能大比拼:CSS
推荐大家使用的CSS书写规
 
 

版权所有:北京博看文思科技有限责任公司|(0.0488851070404s)