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

<div class="tiandi_item" onclick="javascript:location.href='#'">
<div class="tiandi_item_img"><img src="data: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里设置图片圆角的问题的更多相关文章

  1. canvas里设置width和css里设置width和js里设置width的区别

    canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...

  2. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

  3. php imagick设置图片圆角的方法

    php imagick设置图片圆角的方法 <pre>header('Content-Type: image/png'); $image = new Imagick('http://stat ...

  4. 关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案

    最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...

  5. 在css中设置图片的背景图，怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...

  6. css样式设置图片半透明度，兼容IE8，火狐

    关于背景颜色透明的兼容浏览器的问题,一直是个问题,我所写的兼容IE8,和火狐,说是兼容所有浏览器我就没有测试,有兴趣的朋友可以自己测试下吧. background-color:white;filter ...

  7. css里设置一个div在顶部固定,不随滚动条滚动而滚动

    <div style="border:1px solid red;position:fixed;top:0px;float:inherit;width:100%">删除 ...

  8. css 样式 设置图片成为圆形

    <div style="float: left;border-radius:70%; height: 80px; overflow:hidden;"> <img ...

  9. iOS 设置图片imageView圆角——对图片进行裁剪

    以前设置图片圆角总是把imageView设置成圆形,然后设置maskToBounds为YES,其实这样处理很消耗性能,图片多了之后比较卡,最好将图片进行裁剪后显示:这里有个分类可以用: UIImage ...

随机推荐

  1. C++拾遗（十一）类继承

    首先,这里提到的继承都是公用继承. 派生类 1.派生类需要添加自己的构造函数. 2.派生类创建之前会首先创建基类对象,即调用基类构造函数.在派生类构造函数后通过初始化列表将参数传递给基类构造函数. 3 ...

  2. [转]Windows中的句柄(handle)

    1.句柄是什么?   在windows中,句柄是和对象一一对应的32位无符号整数值.对象可以映射到唯一的句柄,句柄也可以映射到唯一的对象.2.为什么我们需要句柄?   更准确地说,是windows需要 ...

  3. image转文件

    UIImage  *image = self.imageCompainPhoto.image; NSData *imageData = UIImagePNGRepresentation(image); ...

  4. 一行代码实现C#的四舍五入

    C# 使用的是”四舍六入五成双”的银行家算法: 1 2 Math.Round(2.5); // 2 Math.Round(1.5); // 2 由此可见,1.5的Round符合我们的四舍五入,于是Ha ...

  5. 如何修改WAMP中mysql默认空密码&重新登录phpmyadmin

    WAMP安装好后,mysql密码是为空的,那么要如何修改呢?其实很简单,通过几条指令就行了,下面我就一步步来操作. 首先,通过WAMP打开mysql控制台. 提示输入密码,因为现在是空,所以直接按回车 ...

  6. centos 开启apache rewrite模式

    mod_rewrite能使网页伪静态,对于搜索引擎友好,下面就是开启这个功能的说明!启用mod_rewrite模块在conf目录的httpd.conf文件中找到 LoadModule rewrite_ ...

  7. 转：关于copy_to_user()和copy_from_user()的一些用法

    一.Copy_to_user( to, &from, sizeof(from)) To:用户空间函数  (可以是数组) From:内核空间函数(可以是数组) sizeof(from):内核空间 ...

  8. 在线安装maven插件问题：Cannot complete the install because one or more required items could not be found.

    用Eclipse在线安装的方式:Help-->Install  New Software 地址输入:http://m2eclipse.sonatype.org/sites/m2e/,列表中打勾勾 ...

  9. c# 6.0 学习笔记

    refer : http://www.cnblogs.com/yinrq/p/5600530.html http://www.cnblogs.com/wolf-sun/p/5168217.html h ...

  10. Attach file to database

    D:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA databaseName.mdf databaseName.l ...