纯CSS圆角框：透明圆角化背景图片

b4

H3标签位于第五位，所以它的背景图片需要向上负偏移b2+b3+b4高度值的各，也就是4px；

这样，b2、b3、b4、h3的图片叠加起来和原始图片上下渐变的效果完全重合，如同一张图片，这样就达到模拟圆角图片的效果。

怎么样，原理够简单明了吧！

原理清楚后，要实现起来也就是一件水到渠成的事！

HTML结构层：

如同我们在第一章中模型所见，保持结构不变。

CSS样式层：（只写关键代码）

将上面的几句代码进行合并，如下所示：

和第一章中同样的道理，我们肯定要在各个不同的块框中有不同的背景图片的变化，也就是说，我们也要实现不同的换肤方案，当一个页面要多次调用同一个圆角框时，也可以让它们有些丰富的变化。实现不同的风格。OK，没问题，你只需要简单的将下面的样式中的背景图片的路径改变一下就可以了。

你只需要复制上面的代码，简单修改一下边框色，背景色，图片路径就变成你想要的风格了，是不是很简单呢？然后在你想应用样式的容器上定义这个