《精通CSS》读书笔记（三）

续上篇。

第3章

这一章里展示了众多的trick。下面总结和补充一下方案实现和限制条件。

首先是针对永恒的话题：圆角框。

1. 固定宽度圆角框

实现：在外层元素（容器）上设定背景色和底部圆角图，在标题（内部第一个元素）上设定顶部圆角图。

限制：
* 宽度是定值像素的。
* 必须有内外两层block元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色），不能是透明的。

2. 固定宽度圆角框的变形

实现：在外层元素（容器）上设定纵向重复（repeat-y）的背景图，在内部第一个元素上设定顶部圆角图，在内部最后一个元素上设定底部圆角图。

限制：
* 宽度是定值像素的。
* 必须有内外两层block元素，内层至少有两个元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色），不能是透明的。

注：固定背景色的限制可以通过增加位移来解决，例如：

<div class="box">
	<div class="top">Heading</div>
	<div>Content...</div>
	<div class="bottom">Content...</div>
</div>

.box {
	background:url(border-middle.png) repeat-y; width:120px;
	margin:12px 0;
}
.box .top {
	background:url(border-top.png) top no-repeat;
	margin:0;
	position:relative; top:-12px; padding-top:12px; margin-bottom:-12px;
}
.box .bottom {
	background:url(border-bottom.png) bottom no-repeat;
	margin:0;
	position:relative; top:12px; padding-bottom:12px; margin-top:-12px;
}

注意，由于使用了margin，需要注意垂直合并的情况，增加了样式的复杂度。

3. sliding doors 技巧

实现：添加若干层额外的container，在每层上分别应用左下、右下、左上、右上的圆角图。

限制：
* 必须有四层block元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色），不能是透明的。

本质上，sliding doors技巧和前两个方式是一致的，都是通过多层block元素上的背景重叠来模拟总体效果。区别就是前面只需要两层——多数情况下，语义结构可以有两层元素，而几乎不可能出现语义结构需要四层元素的情况。

本书作者对此的看法是，如果只要少数地方，那忍受一下无意义标签也可以，但是如果有很多地方，那就需要考虑其方案。

我对此的看法有些不同。实际上，书中示例在容器宽度高度增大到超出图片宽高时，就会出现空白。如果要适应任意大小的容器，要么增大图片尺寸到一个很大的数值，要么增加更多层次，使用多达九层元素（相当于切分成井字形的九份）！

因此同样是忍受无语义元素，我宁可使用table构造一个井字布局来模拟border，这个方式比多层嵌套无语义div更清晰。

当然，最好的方案是使用CSS3的border-image和border-radius。在没有CSS3支持前，则是使用脚本自动插入辅助元素来实现。书中给出的是http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/。

4. mountaintop corner 技巧

实现：添加若干层额外的container，在每层上分别应用左下、右下、左上、右上的圆角蒙板图。

限制：
* 必须有四层block元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色）。

此技巧的本意是允许容器背景色（图）灵活变换，但是由于其外部背景确必须是固定单色的（不像前面的技巧是有可能克服的），所以在我看来，这个trick局限性非常之大，不值得推广。

待续...

评论

1 楼 tiger.passion 2007-10-19  

box在制作中最常打交道的元素之一,hax,你写的这中box结构非常常见,很长一段时间,也是这样,不过我后来发现一种结构更简单,更实用的.

    <!-- folder --> 
    <div class="folder-top"><h3>head</h3></div>      
    <div class="folder-bottom">Content...</div>  
    <!-- end folder -->