今天做了一个项目，效果图内页的产品图片都是带圆角的，于是前端的做了圆角的效果，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. 武汉科技大学ACM：1005: 单位转换

    Problem Description BobLee最近在复习考研,在复习计算 机组成原理的时候,遇到了一个问题.就是在计算机存储里面的单位转换.我们都知道1MB=1024KB,1KB=1024B,1 ...

  2. JAVA-3-水仙花

    public static void main(String[] args) { // TODO 自动生成的方法存根 int i = 100; while (i < 1000) { int a, ...

  3. SQL服务器名称更改

    引用地址:http://blog.sina.com.cn/s/blog_6c9f8a0501016s3p.html 1.使用select @@ServerName可以看到当前数据库的服务器名 2.从S ...

  4. image控件读取数据库二进制图片

    DataGridShowImage.aspx   <%@ Page language="c#" debug="true" Codebehind=" ...

  5. web前端开发框架搜集

    Web应用框架(Web application framework)是一种电脑软件框架,用来支持动态网站.网络应用程序及网络服务的开发.这种框架有助于减轻网页开发时共通性活动的工作负荷,例如许多框架提 ...

  6. input 类型为number型时，maxlength不生效？

    input 类型为number型时,maxlength不生效? 可以加oninput属性来控制最大长度:<input id="numInput" type="num ...

  7. 04 - 替换vtkDataObject中的GetPipelineInformation 和GetExecutive 方法 VTK 6.0 迁移

    VTK6 引入了许多不兼容的变.其中之一是删除vtkDataObject中所有有关管道的方法.其中的两个方法就是GetPipelineInformation() 和 GetExecutive().这些 ...

  8. Nmap Snote

    Title:Nmap Snote --2011-11-15 21:28 用Nmap上瘾了,怕以后忘记,也就记一下. Nmap -v -sS -n -p1-65535 IP Nmap -v -sS -p ...

  9. 让PV10000+的秘诀

    原文地址:http://www.phonegap100.com/article-410-1.html 让PV10000+的秘诀 2015-5-4 21:49| 发布者: admin| 查看: 122| ...

  10. [Tips]ASP.NET MVC 发布到服务器后Model中属性相关的Attribute失效

    Asp.net MVC4 开发的项目,发布到真实环境环境后Model中的一个属性设置的了Attribute,但是这些Attribute都失效. 经过对比和坚持代码发现控制长度的Attribute使用错 ...