网页中的阴影效果给人一种朦胧的感觉,一个设计者在设计页面时经常会用到阴影,圆角,半透明,渐变等效果.而对于好看的效果在网页实现中却显得很棘手.而这些棘手的问题在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