CSS3强大功能,前端设计更加方便快捷

2010 - 8 - 27 作者 : 石家庄SEO 分类 :DIV-CSS
  • TAG :

CSS3强大功能,前端设计更加方便快捷

点击查看原图

 点击查看原图

无图实现圆角 滤镜

在线演示:演示1 演示2 演示3

下面是个TAG 实例

 [code type=html] <div class="tabBox"> <ul class="tabs"> <li class="selected"><a href="#">Tab One</a></li> <li><a href="#">Tab Two</a></li> <li><a href="#">Tab Three</a></li> </ul> <div class="content"> <p>Lorem ipsum dolor sit amet</p> </div></div> [/code]CSS部分:[code type=css] 
.tabBox .tabs { margin: 0; padding: 0 10px; overflow: hidden; margin-bottom: -1px; height: 2.25em;}.tabBox .tabs li { float: left; list-style: none; margin: 0; padding: .25em .25em 0; height: 2em; overflow: hidden; position: relative; z-index: 1; border-bottom: 1px solid #FFF;}.tabBox .tabs li.selected { z-index: 3;}.tabBox .tabs a { float: left; height: 2em; line-height: 2em; -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; background: #EEE; border: 1px solid #CCC; border-bottom: 0; padding: 0 10px; color: #000; text-decoration: none; behavior: url(PIE.htc);}.tabBox .tabs .selected a { background: #FFF; -webkit-box-shadow: #CCC 0 0 .25em; -moz-box-shadow: #CCC 0 0 .25em; box-shadow: #CCC 0 0 .25em;}.tabBox .tabs a:hover { background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF)); background: -moz-linear-gradient(#EEF, #FFF 70%); background: linear-gradient(#EEF, #FFF 70%); -pie-background: linear-gradient(#EEF, #FFF 70%);}.tabBox .content { clear: left; position: relative; z-index: 2; padding: 2em 1em; border: 1px solid #CCC; background: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: #CCC 0 0 .25em; -moz-box-shadow: #CCC 0 0 .25em; box-shadow: #CCC 0 0 .25em; behavior: url(PIE.htc);}

[/code]

在线体验与下载地址 http://css3pie.com/

4857 人围观 / 1 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18