作者:艺灵设计 | | 时间:2013-08-04 17:35:27 | 评:1 | 阅:28372 | 积分: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>

　提示：【复制代码】与【保存代码】功能暂只支持ie内核哦^v^
    

    点此下载→→<a target=_blank href="http://www.yilingsj.com/e/DownSys/DownSoft/?classid=86&id=87&pathid=0" title="css3边框阴影效果" target="_blank" class="ls">【代码】css3边框阴影效果.zip</a>