css3边框阴影效果

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

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

box-shadow:3px 3px 10px #9edeff;

效果图： css3阴影效果 下面来说下css3阴影的语法： box-shadow：none | [ , ]* = inset? && [ {2,4} && ? ] 取值： none： 无阴影 ①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 ②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 ③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 ④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 ： 设置对象的阴影的颜色。 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阴影效果
源码如下：

box-shadow:3px 3px 10px #9edeff;

box-shadow:3px 3px 10px #9edeff inset;

box-shadow:box-shadow:0 0 5px 3px #f00,0 0 5px 6px #00f,0 0 5px 10px #00FF00;

请在非ie内核下浏览

东莞网站建设www.zg886.cn