创建自定义圆角和边框

CSS Design: Creating Custom Corners & Borders
by Søren Madsen
原文
我们都听过这样一句话：

“用CSS设计的网站趋向于箱子般方方正正和有轮廓鲜明的硬边线。那些圆角都哪里去了？”
答案：圆角就在这里。在本文中，我们将要展示利用有效的逻辑标记语言促成自定义的边框和圆角能够充分流畅和灵活的适用于多变的内容。

◆标 记
在下面举例的标记语言中,XHTML语言已经通过分割把虚拟段落拉长了：
◆挂 接

如果我们想完全控制版面，我们必须确保有足够元素能够和我们的CSS对应。让我们称这些元素为“hooks（挂接）”。我们的标记仅仅需要再多几个。
首先，我们用div把整篇文章包括起来，然后把每个结构片段用适当的元素包括起来。


如果我们检查标记，我们会看到我们给了自己至少5个挂接，那是我们需要放置在我们文章中每四个角内自定义图片所要的全部。
№ 第1步 —初级标记

◆设 计



首先让我们对基本版面参数作出决定。我们的平面设计师给了我们这个标记。

“我想要边框和圆角看起来像这样。”他说。他还告诉我们事实上要清楚所有的文章可能会有不同的长度和宽度，而且他还没有确定他想要的文章背景色是什么样的。事实上，他甚至不确定那些边框是他想要的。“你能够不设定死，或者使他易于改变吗？”他问道。


◆处 理

我们打算使挂接的数量越少越好，所以当我们为解决方案准备图片的时候必须额外注意，确保我们需要的图形适合于挂接元素而且已经出现在我们的文档里。

我们已经用div包含了整篇文章。那代替了左顶角、左边和顶边。标题（header）元素被默认阻止，我们将利用他们的特性：他们扩展他们到父元素的整个宽边。所以我们对右顶角用

元素。我们对文章左下角用div元素，包含在内的段落作为我们的右下角。

№第1.1步，怎样大略切分

注：很明显，你能用任何元素对图形挂钩。你的文档标记结构未必准确的匹配于我们提到的例子。我们所知道的是你可能仅仅只有一段你想要运用自定义边框和圆角的文字，那也很适用此方法。

按照更简单的规定，你最少需要4个结构元素。（根据元素的高度你可能需要5个。）如果必要，这些元素可以是非语言的div，每个都有自己独立的等级。只要记住实施div元素必须包含内容表明他的存在。同时记住如果你的内容有助于他的共同结构元素比如，标题、段落等等，你能够也应该使用那些元素来替代非语言的 div元素。


◆类 型

继续...我们打开元素边框然后设置用div包含了的整篇文章相关的宽度，看看是怎么运作的：

№第2步，基本元素特性

这里没有什么令人惊讶的东西。然而，我们很惊讶。注意出现在div class="ArticleBody"前后的空隙。现在忽视那个问题，我们 继续来写一个我们的类型表单：

№第3步---首次尝试

不错！事实上比我们预期的好。很明显我们需要给各个元素加上些料是整体版面看上去更好些，然后是修补那些恼人的空隙。这些空隙是我们插入的段落（阻止）元素的回车导致的。
我们可以完全避免使用段落元素从而绕过这些问题，此外的一个原因是美国图书馆协会的读者们所周知的，我们更乐于保持我们的标记整洁逻辑。这不是我们数据的错误而是我们的懒惰问题。

在我们上一段中，我们假定一个回车相当于1.5em，那个数值被定为我们的行高。因此我们首要尝试着给我们的文章主体和底部增加一个边缘最高值为1.5em。在绝大多数标准兼容的浏览器里这个运行的很好，除了地球上那些94%以外的其他浏览器使用者（请别点名）。
经过测试，考验，误差和反复调试我们发现我们至少设置边缘最高值为2em，以确保元素接触和空隙关闭：

№第4步---看起来我们终于快了！

◆向后兼容

如果你已经在Netscape4.x版本观看这个例子，你很可能注意到那个页面是空白的。我们没有发现如何在NS4.x里解决这个技术问题。所以我们将隐藏这类浏览器不能完全渲染的问题。NS4.x
不能理解含有媒体=“all”的标签类型，我们已经利用遵循的例子证实了。我们做了2个类型的标签，一个是我们想要所有浏览器都能渲染的类型，另一个是我们想要在NS4.x里面隐藏的类型。即使这样做让我们心痛，我们已经改变了我们从行高到像素的字体大小规范。你想要向后兼容，你做到了。

№第5步---在NS4.x中的功能衰减

◆真正的世界

“是的，伙计，但我们想看看真正的应用。”你说。我们期望那样而且假设了一个更高级的上下文例子的技术应用。
我们我们借用了Alex Robinson的已经彻底测试的版面布局来应用我们的类型，很高兴我们这样做了！
我们的首要尝试是释放windowsIE6中的一组灾难事件，触发程序缺陷影响我们元素级别中的z索引堆。整个元素消失了，空白表现的像孩子们继续拖延他们的就寝时间一样。这很混乱。
然后我们懂得了一个简单的位置：一个很好的相关位置
能够修正一切。进一步研究请看第6步里面的源代码

№第6步-我们在一个完全有标题、分栏和底部的版面布局尝试应用我们的技术

◆限 制

如果你已经注意到了，你可能发现这个例子只适用于围绕物、纯色背景。用这样的方法我们需要用右顶角的图形去覆盖左顶角的图形。如果我们让右顶角的图形透明，
它下面的左顶角的图形就显现了。底部也同样如此。这绝对是个限制。也许在本文第二部分的中我们会展示如何使他适用于渐变背景。
同时，这篇文章示范了一个非特殊的向后兼容的有效的标记方法，我们也真诚的希望这个能够激发更多后续的想法，也许一些甚至可以避免需要纯色背景的方法。