一个DIV圆角图片布局思路

效果图如下图所示，最早的思路是使用5张小图片实现圆角和黑边
本地测试的效果很好，但是发布到外网以后再去访问就发生了部分圆角不能显示的情况
具体为什么5张图片会有1-2张不能完成加载的原因一直没有找到




于是改变了原有的思路，如果把5张小图片集合到一起的话，加载起来就不会发生缺边少角的情况了


使用在边框的时候因为图片会平铺，所以纵向要保证一直使用图片右边的黑框（也就是X轴-20px至-30px的图片部分）
使用在横向边框时使用图片下方的黑框（Y轴-20px至-30px的图片部分）

.pop_tb{
	BORDER-COLLAPSE: collapse;
}
.pop_tb .pop_content {
	background-color:#fff;
}
.pop_tb .pop_topleft,.pop_topright, .pop_bottomleft, .pop_bottomright, .pop_border{
	width:10px;
	height:10px;
	opacity:0.5;
	filter:alpha(opacity=50);
	background-image:url(pop_border.gif);
	overflow:hidden;
}
/**/
.pop_tb .pop_topleft	{background-position:0 0px;}
.pop_tb .pop_topright	{background-position:-10 0px;}
.pop_tb .pop_bottomleft	{background-position:0 -10px;}
.pop_tb .pop_bottomright	{background-position:-10 -10px;}
.pop_tb .pop_border	{background-position:-20 -20px;}

评论

7 楼 gepangtsai 2010-03-10  

rickqin 写道

这不就是用DIV做圆角矩形的方法么，老早的方法了。不过据说新版的CSS支持定义圆角矩形的语句。

还定义了背景拉申，这样就可以用一张圆角图来作背景

6 楼 elementstorm 2010-03-09  

呃...请google CSS Sprite

5 楼 rickqin 2010-03-08  

这不就是用DIV做圆角矩形的方法么，老早的方法了。不过据说新版的CSS支持定义圆角矩形的语句。

4 楼 happysoul 2010-03-06  

asialee 写道

lz是不是在使用jquery插件的时候的弹出框的问题呀？ 我当时就遇到了。

我只是写个blog记录了一下，顺便点了下发到 博客频道 没想到就被弄上来了...
这东西对于美工来说确实很初级，但是对于我这种不会的人来说能弄出来也算是学到新东西了
确实有用到jquery，不过只用到了show()，将初始状态的display改成显示
整体不过是用到了背景图的定位而已，相比原来每个角落都要写一遍图片路径要简单很多
背景图会平铺，如果不弄好的话就会出现圆和方块同时出现的现象

    

最上面有源码，应该不是很难看懂，5个部分同时使用一张图片
然后在单独定位每个样式对应的图片位置

PS：论坛里其他高手觉得无聊可以无视（才看到有个投“新手帖”的，以前都没注意到有这个功能），毕竟我只是在开发时碰到了这个问题，当做blog记录而已，有幸被抽出来放到了首页

3 楼 bevis.cn 2010-03-06  

蛮像facebook的感觉的

2 楼 asialee 2010-03-06  

我对图片切割不是很熟悉能不能稍微讲一下。

1 楼 asialee 2010-03-06  

lz是不是在使用jquery插件的时候的弹出框的问题呀？ 我当时就遇到了。