今天做了一个项目，效果图内页的产品图片都是带圆角的，于是前端的做了圆角的效果，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. wdcp/wdlinux一键包的php5.3版本添加Zend.so 和Soap.so

    Wdcp 安装soap扩展 1.首先进入 soap模块的安装文件,wdcp安装包解压对应的php中有,如:/root/miloxi/lanmp/php-5.5.10/ext/soap 2.执行: (1 ...

  2. getAttribute：取得属性； setAttribute：设置属性。

    input.setAttribute("title"); 当它是一个值,就是取值. input.setAttribute("title", "hell ...

  3. iScroll 下拉刷新

    <!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...

  4. Mac下安装MySQL-python

    前提系统中已安装python.mysql数据库: 第一步(终端输入): $ export PATH=$PATH:/usr/local/mysql/bin 第二步(终端输入): $ sudo pip i ...

  5. linux常用命令(5)rmdir命令

    rmdir是常用的命令,该命令的功能是删除空目录,一个目录被删除之前必须是空的.(注意,rm - r dir命令可代替rmdir,但是有很大危险性.)删除某目录时也必须具有对父目录的写权限.1．命令格 ...

  6. Swift—下标-备

    看下面的示例代码是不是使用过: var studentList: String[]  = ["张三","李四","王五"] studentL ...

  7. android使用apktool反编译出现Input file (d:\t) was not found or was not readable

    Input file (d:\t) was not found or was not readable 出现这个错误是因为apktool压缩包下载错误,我是下成首页的那个压缩包了 正确下载地址:htt ...

  8. 编程的宗派（OOP与FP孰优孰劣）--王垠

    编程的宗派 总是有人喜欢争论这类问题,到底是"函数式编程"(FP)好,还是"面向对象编程"(OOP)好.既然出了两个帮派,就有人积极地做它们的帮众,互相唾骂和鄙 ...

  9. 【转】android如何查看cpu的占用率和内存泄漏

    原文网址:http://www.cnblogs.com/yejiurui/p/3472765.html 在分析内存优化的过程中,其中一个最重要的是我们如何查看cpu的占用率和内存的占用率呢,这在一定程 ...

  10. .OCX、.dll文件注册命令Regsvr32的使用

    1.打开文件,打开需要注册的OCX文件或dll文件,2.然后根据需要进行OCX文件或DLL文件的注册和反注册 DLL.OCX注册方法--文件Regsvr32用法及情况介绍 使用过activex的人都知 ...