CSS3网页制作实例圆角的网页信息栏.doc

《CSS3网页制作实例圆角的网页信息栏.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、优选CSS3网页制作实例圆角的网页信息栏使用CSS3的Gradient线性渐变，Radius圆角，Shadow阴影，完美兼容IE9(+),Chrome,Firefox,Opera。由于IE6/7/8对CSS3支持的不是很好，所以圆角和阴影效果不能显示出来。不过在不需要圆角的情况下完全可以把圆角样式屏蔽。页面代码如下：/*=====monstyle=====*/ul{margin:0;padding:0;

2、list-style:none;font-size:12px;color:#767676;}ulli{height:24px;line-height:24px;text-indent:38px;}h3{height:28px;line-height:28px;margin:0;padding:0;text-indent:20px;font-size:14px;color:#333;border-top-left-radius:3px;border-top-right-radius:3px;-moz-border-radius-topleft:

3、3px;-moz-border-radius-topright:3px;webkit-border-top-left-radius:3px;webkit-border-top-right-radius:3px;-o-border-top-left-radius:3px;-o-border-top-right-radius:3px;}/*列表头的圆角样式*//*=====boxstyle====*/.box{width:300px;margin:10pxauto;padding:005px0;font-family:tahoma;border-

4、radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;}/*列表框的圆角样式*/7/7优选.blueshadow{box-shadow:005px#9bc1e7;-moz-box-shadow:005px#9bc1e7;-webkit-box-shadow:005px#9bc1e7;-o-box-shadow:005px#9bc1e7;}/*列表框的阴影样式*/.greenshadow{box-shadow:005px#6cb133;-

5、moz-box-shadow:005px#6cb133;-webkit-box-shadow:005px#6cb133;-o-box-shadow:005px#6cb133;}/*列表框的阴影样式*/.greyshadow{box-shadow:005px#b9b9b9;-moz-box-shadow:005px#b9b9b9;-webkit-box-shadow:005px#b9b9b9;-o-box-shadow:005px#b9b9b9;}/*列表框的阴影样式*/.orangeshadow{box-shadow:005px#fea912

6、;-moz-box-shadow:005px#fea912;-webkit-box-shadow:005px#fea912;-o-box-shadow:005px#fea912;}/*列表框的阴影样式*/.purpleshadow{box-shadow:005px#be91ce;-moz-box-shadow:005px#be91ce;-webkit-box-shadow:005px#be91ce;-o-box-shadow:005px#be91ce;}/*列表框的阴影样式*//*=====borderstyle=====*/.borderb

7、lue{border:1pxsolid#9bc1e7;}.bordergreen{border:1pxsolid#6cb133;}.bordergrey{border:1pxsolid#b9b9b9;}.borderorange{border:1pxsolid#fea912;}.borderpurple{border:1pxsolid#be91ce;}/*=====header3style=====*/7/7优选.blueheader{background:-moz-linear-gradient(top,#dfefff0,#c1e0fe10

8、0%);background:-webkit-gradient(linear,00,0100%,from(#dfefff),to(#c1e0fe));backgro