background-image实现border效果及多图png如何实现background-size为原图一半

标签：

毛主席说过：三日不学习，赶不上刘少奇。

近两月疯赶项目，做得快要吐了，今日才有空浏览一下他人网站，收益良多，解决了我一直以来以为颇为棘手的两大难题。

一、background-image实现border效果

为何要这么费事？不直接用border呢？这是因为手机首页经常用九宫格来排列图片菜单，一般都是用百分比来平均分配每个格子的大小，如果格子再多1px的border，就会非常尴尬不好处理。

background-image的特点是占据元素整个尺寸，包括内边距和边框。

示例：

1. background-image: linear-gradient(to left, transparent 0%, transparent 50%, #d9d9d9 50%, #d9d9d9 100%);
2. -webkit-background-size: 1px 100%;
3. background-size: 1px 100%;
4. background-repeat: repeat-y !important;

也挺麻烦的，但也不失为解决问题的办法，列出以供扩展思路。

二、多图png如何实现background-size为原图一半

一般网站习惯将所有icon图标放到一张png格式的图里，一来是多icon的文件与单个icon的文件大小相差不大，可以更节省空间，另外就是便于加载。

但我之前在做手机网站的时候，因为图片的实际大小是放进去的图的两倍，这样可以实现高清效果，但是图片都放在一个文件的时候，用background-size总是不成功，只好分离成单独的文件来控制。现在参考别人的网站，发现别人实现了：

方法一：

整体：

1. background: url("http://img.to8to.com/wap/v2/m3icon.png") no-repeat;
2.  width: 50px;
3. height: 51px;
4. background-size: 50px; }

具体的图标只需设置background-position：

background-image实现border效果及多图png如何实现background-size为原图一半

标签：

原文地址：http://www.cnblogs.com/wildorchid/p/4881976.html