加拿大预测网-在线预测

信息动态

网站设计是技术与创意的完美融合!

技术资讯

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图片制𒐪作有着维护方面、文件简洁、兼容性广泛等特点，并且样式控制也比较自由。

0532-85810878 473587358 扫码添加微信

加拿大预测网-在线预测:扫码添加微信

 扫码关注公众号

加拿大预测网-在线预测:官方公众号

 2054585360