一个关于CSS的问题

来源：百度知道 编辑：UC知道 时间：2024/06/01 21:50:52
这里的效果是：左右那两条带阴影的边框，宽190，这里只用到了一张图片190px* 1px 的 。对应的css是：
.shop_int_left_con {
PADDING-RIGHT: 10px; PADDING-LEFT: 12px; BACKGROUND: url(../images/shop_int_left_conbg.gif) repeat-y left center; PADDING-BOTTOM: 0px; PADDING-TOP: 5px
}

我想问这样的效果是怎么产生的？是不是这里的PADDING起了作用？怎么计算呢？如果我将图片换成 485 * 1 的呢？我现在是右边的那条出不来
那padding值怎么计算呢？才能显示另一条？

是repeat-y起了作用，意思是纵向重复图片
你换成485*1的就比原来的宽了，左对齐当然右边那条显示不出来了。padding是填充
和padding没有关系，padding只影响内用与容器的间距，并不影响background。你试试把整个容器宽度都扩大看看，就能了。看看你的html代码，一定给容器规定了宽度！

过河哈

我帮你分析一下下面这段代码的意思你就不难看出是什么意思 了：
.shop_int_left_con {
PADDING-RIGHT: 10px;这里是说他距左边框10px；也就是向右顶了10px;
PADDING-LEFT: 12px;
BACKGROUND:（url../images/shop_int_left_conbg.gif)这里是用这张图片填充。 repeat-y并且沿Y轴（向下）平铺。 left center; PADDING-BOTTOM: 0px;距上边框Oxp PADDING-TOP: 5px 距顶边框5px;
}

那么可以看出
1.应该是这张图片沿y轴平铺上起了关键性作用。
2.padding他主要是用于在div中定位用的。