码迷,mamicode.com
首页 > Web开发 > 详细

关于在css里设置图片圆角的问题

时间:2015-02-05 10:49:39      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:

今天做了一个项目,效果图内页的产品图片都是带圆角的,于是前端的做了圆角的效果,div+css是这样的,首先div布局是:

<div class="tiandi_item" onclick="javascript:location.href=‘#‘">
<div class="tiandi_item_img"><img src="images/tiandi_04.jpg" /></div>
<div class="tiandi_item_text ellipsis">六一儿童节互动六一儿童节互动六一儿童节互动</div>

(css文件里)加入如下样式:

.tiandi_item{ width:160px; height:145px; background-color:#faecb2; border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px; text-align:center; padding-top:5px; line-height:30px; overflow:hidden; float:left; margin:0 50px 10px 0; cursor:pointer;}

.tiandi_item_img{ width:154px; height:112px; overflow:hidden;border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px;}
.tiandi_item_img img{ width:100%; display: block; margin-bottom: 7px; border: 1px solid #ffd300; border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px;}

控制圆角主要是border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px;,后面的主要是兼容webkit内核和moz的浏览器,.tiandi_item_img img也要加radius是因为图片大小不同,有的图片上边有圆角,下边没有圆角

关于在css里设置图片圆角的问题

标签:

原文地址:http://www.cnblogs.com/wanshutao/p/4273930.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!