css3边框阴影效果

来源：互联网发布：php免费开源微信平台编辑：程序博客网时间：2024/05/21 10:58
作者:艺灵设计 | 来源:http://www.yilingsj.com | 时间: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>
0 0