[转]css的圆角矩形背景布局

 

在css Zen Gadern看到一个叫做Contempo Finery的样式，作者是Ro London。

这个样式中用了一些小技巧实现了随内容扩展的圆角矩形背景，之前一直对这种背景的实现比较头疼，表格时代的布局是三个tr搞定，不过那样有太多的非结构化冗余标签，现在如何有效的实现呢？这里用的方法蛮有意思的，记下来留做参考。

其中只用到了一个背景图片——一个足够高的圆角gif图片，除了上下边框的圆角，中间部分都是可重复的（否则也不谈随内容延伸了）。由于gif用索引色，所以图片高度的增加对于文件体积的增加影响不大，因为高度的增加只体现在中间重复的部分，比如这个样式中就用了一个高度为1200px的图，高度越大适应性越大。

具体做法就是，比如现在有一个id为container的div元素，其中含有若干p元素（这种结构也比较常见）。container应用这个背景，所有的p元素也应用这个背景，不同的是container的背景位置是top，而p元素的背景位置的y坐标是一个负值，这样便于将上部的圆角边框隐藏掉，p的margin为0，这样可以保证各个p元素连在一起，同是container的padding-top也应该足够大，以免背景被p的背景覆盖。container中的最后一个元素（可能是p，也可能不是p）也应用这个背景图，背景位置是bottom，则显示圆角矩形的下边框。这样这个圆角矩形就可以“拼”出来了。
总结一下就是上边框用的是父容器的背景，下边框用的是最后一个元素的背景，中间重复的部分分配给各个元素。

这种方法需要注意几点，一是gif图片不是透明的，否则需要覆盖父级背景的时候覆盖不掉；二是这个背景图片在文件体积允许的情况下要足够高，只要能保证高过最高的单个元素（这个例子中是p元素）即可。

参考这个示意图

转载于:https://www.cnblogs.com/WilliamsQi/articles/794753.html