css3边框阴影效果

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-08-04 17:35:27　-　阅:　-　评:1　-　积分:0

网页中的阴影效果给人一种朦胧的感觉,一个设计者在设计页面时经常会用到阴影,圆角,半透明,渐变等效果.而对于好看的效果在网页实现中却显得很棘手.而这些棘手的问题在css3下一切都已经不是问题．下面以本站的阴影效果为例,来分享下关于阴影的用法.

如图:
css3阴影效果
当鼠标滑过本站的文章前面的缩略图时，外面的边框会发生变化．除了明显的颜色变化外，还有若隐若现的阴影成份在里面．不要怀疑，这就是css3中的阴影．源码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>css3阴影--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="css3边框阴影,内边框阴影,五彩边框阴影,box-shadow,css3属性,边框阴影兼容ie6">
<meta name="description" content="css3边框阴影,内边框阴影,五彩边框阴影,box-shadow,css3属性,边框阴影兼容ie6">
<style>
div{
width: 300px;
height: 100px;
border: 1px solid #2cb7fe;
text-align: center;
-webkit-box-shadow: 3px 3px 10px #9edeff;
box-shadow: 3px 3px 10px #9edeff;
}
</style>
</head>
<body>
<div>box-shadow:3px 3px 10px #9edeff;</div>
</body>
</html>

效果图：
css3阴影效果
下面来说下css3阴影的语法：
box-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <color>? ]
取值：
none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>：设置对象的阴影的颜色。
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
下面来看看语法中的内阴影是什么效果，修改源码：

div{width:300px; height:100px;border:1px solid #2cb7fe;text-align:center;
-webkit-box-shadow:3px 3px 10px #9edeff inset;box-shadow:3px 3px 10px #9edeff inset;}

效果图：
css3内阴影效果
怎么样，效果又不同了吧．此属性还可以设置多组值，中间用","隔开．效果图：
css3阴影效果
源码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>css3边框阴影效果--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="css3边框阴影,内边框阴影,五彩边框阴影,box-shadow,css3属性,边框阴影兼容ie6">
<meta name="description" content="css3边框阴影,内边框阴影,五彩边框阴影,box-shadow,css3属性,边框阴影兼容ie6">
<style>
div {
width: 300px;
height: 100px;
border: 1px solid #2cb7fe;
font-size: 14px;
margin: 30px;
}
.div1 {
-webkit-box-shadow: 3px 3px 10px #9edeff;
box-shadow: 3px 3px 10px #9edeff;
}
.div2 {
-webkit-box-shadow: 3px 3px 10px #9edeff inset;
box-shadow: 3px 3px 10px #9edeff inset;
}
.div3 {
-webkit-box-shadow: 0 0 5px 3px #f00, 0 0 5px 6px #00f, 0 0 5px 10px #00FF00;
box-shadow:0 0 5px 3px #f00, 0 0 5px 6px #00f, 0 0 5px 10px #00FF00;
}
</style>
</head>
<body>
<div class="div1">box-shadow:3px 3px 10px #9edeff;</div>
<div class="div2">box-shadow:3px 3px 10px #9edeff inset;</div>
<div class="div3">   box-shadow:box-shadow:0 0 5px 3px #f00,0 0 5px 6px #00f,0 0 5px 10px #00FF00;</div>
<p>请在非<strong style="color:#f00">ie</strong>内核下浏览</p>
</body>
</html>

点此下载→→【代码】css3边框阴影效果.zip　　

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/css3/2013-08-04/70.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！