今天做了一个项目,效果图内页的产品图片都是带圆角的,于是前端的做了圆角的效果,div+css是这样的,首先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是因为图片大小不同,有的图片上边有圆角,下边没有圆角
canvas里设置width和css里设置width和js里设置width的区别
canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...
vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
php imagick设置图片圆角的方法
php imagick设置图片圆角的方法
header('Content-Type: image/png'); $image = new Imagick('http://stat ...
关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案
最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...
在css中设置图片的背景图,怎么设置图片纵向拉伸
css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...
css样式设置图片半透明度,兼容IE8,火狐
关于背景颜色透明的兼容浏览器的问题,一直是个问题,我所写的兼容IE8,和火狐,说是兼容所有浏览器我就没有测试,有兴趣的朋友可以自己测试下吧. background-color:white;filter ...
css里设置一个div在顶部固定,不随滚动条滚动而滚动
css 样式 设置图片成为圆形
iOS 设置图片imageView圆角——对图片进行裁剪
以前设置图片圆角总是把imageView设置成圆形,然后设置maskToBounds为YES,其实这样处理很消耗性能,图片多了之后比较卡,最好将图片进行裁剪后显示:这里有个分类可以用: UIImage ...
随机推荐
hexo deploy出错的解决方法
.ERROR Deployer not found: git 执行npm install hexo-deployer-git --save .$ hexo d INFO Deploying: git ...
向 ViewPager 中添加 包含 ListView 的 Fragment
对与fragment就不说什么了,直接看API手册吧,亲. 向 ViewPager 中添加 包含 ListView 的 Fragment 的过程比较麻烦.他所表现的效果就是新闻客户端的滑动翻页效果. ...
(转)C# WinForm中 获得当前鼠标所在控件 或 将窗体中鼠标所在控件名显示在窗体标题上