一个DIV圆角图片布局思路

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




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


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

Css代码  
.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;}  

.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;}





大小: 149 Bytes

大小: 2.4 KB
xn.rar (1.5 KB)
下载次数: 462
查看图片附件

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

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

蛮像facebook的感觉的

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


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

      

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

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

大小: 8.6 KB
查看图片附件

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

呃...请google CSS Sprite

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

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

一个子 没看懂