字号: - o +

侧边栏带阴影的圆角按钮标签效果

2012-10-19 前端开发 2人评论 21,461次浏览   

子曰:和你一同笑过的人,你可能把他忘掉;但是和你一同哭过的人,你却永远不忘 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

最近一直在学习CSS3样式,CSS3总能做出意想不到的效果,没有开始学习的童鞋们,赶紧的啊~不然就Out了

前两天在后台小工具里面添加侧边栏sidebar标签,发现前台效果并不是自己想要的,于是自己动手写了个样式,感觉效果蛮好的,现在放出来供大家参考一下,如果你有更好的效果的也可以贴上来让大家鉴赏一下哈o(∩_∩)o

参考CSS代码如下:

/* widget tag cloud */
.widget_tag_cloud{background-color:#FAFAFA;border:1px solid #E2E2E2;border-left:none;padding:20px;border-radius:0 6px 6px 0;margin:0 0 15px -20px}
.widget_tag_cloud .tagcloud{overflow:hidden;margin:10px 0 -5px;}
.widget_tag_cloud .tagcloud a{
display: inline-block;
margin: 2px 5px 2px 0;
padding: 2px 5px;
background-image: -webkit-linear-gradient(top, #fbfbfb, #f6f6f6);
background-image: -moz-linear-gradient(top, #fbfbfb, #f6f6f6);
background-image: -ms-linear-gradient(top, #fbfbfb, #f6f6f6);
border: 1px solid #ddd;
border-bottom-color: #bbb;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 2px 2px #ddd;
height: 28px;
line-height: 28px;
color: #666;
text-align: center;
background-color: #f6f6f6;
font-size:12px !important;
}
.widget_tag_cloud .tagcloud a:hover{background:#e6e6e6;color: #000;}
.widget_tag_cloud .tagcloud a:active{background:#e6e6e6;color: #000; box-shadow: inset 0 2px 4px #ddd;}

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论2

  1. 博主你评论框上的这些插入“表情、代码、粗体……”的功能是怎么实现的啊? 方便放个教程出来吗?

    有点蓝 10-12 14:18 回复
  2. 不知道怎么弄

发表我的评论

*

*

取消