技术资讯

div圆角和阴影以及鼠标放上去白色图层渐变CSS控制

2013-12-31 12:30:29

随着CSS3和浏览器的升级，一些原来用图片做的青岛网站设计效果，基本都可以替换为css控制了，例如图层阴影，图层半透明等等，下面介绍的这一个效果，就是让一个div图层用圆角显示，背景带阴影：

白色图层渐变：
ul#gallery .pic { width:auto; height:100%; float:left; vertical-align:middle }
ul#gallery .pic a.smallimage { background:#333; /*添加一个黑色的背景为图片变暗的效果做铺垫*/ display:block; width:auto; height:auto;vertical-align:middle}
#bigimage { position:absolute; display:none; /*大图片的父标签设置相对定位并将显示样式设置为隐藏*/ }

阴影：
#bigimage img { width:535px; height:auto; border:8px solid #FFF;filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=6);/*ie*/
-moz-box-shadow: 2px 2px 10px #333;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #333;/*safari或chrome*/
box-shadow:2px 2px 10px #333;/*opera或ie9*/
border-radius: 10px;}

最后一个border-radius属性为圆角

用这种CSS控制的特效，比用png或者gif图片制作有着维护方面、文件简洁、兼容性广泛等特点，并且样式控制也比较自由。

上一篇：DEDE新颖新闻new添加字样

下一篇：图片宽度自适应如何通过css控制