可能你曾经听过类似下面的言论：
“用CSS设计的站点往往是箱子般四四方方的，并且都是非常死板的棱角。有圆角边框吗？”
圆角设计现在就在这里了:)。本篇教程中将示范如何完成一个可以灵活应用于动态内容布局的“圆角边框”。
●The markup
注意在下面的示例代码中，XHTML 断行标记“<br />”被嵌入样本段落中。
<h2>Article header</h2>
<p> A few paragraphs of article text.<br />
A few paragraphs of article text. </p>
<p> A few paragraphs of article text.<br />
A few paragraphs of article text. </p>
<p> A paragraph containing author information </p> |
●The hooks
如果我们需要完全控制页面布局，就必须利用CSS来影响足够多的元素：
首先，将整个文章的内容包含在一个“div”容器内、并适当按主体内容、标题……分段包含于各自的"div"容器内。
<div class="Article">
<h2>Article header</h2>
<div class="ArticleBody">
<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>
<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>
</div>
<div class="ArticleFooter">
<p>
A paragraph containing author information
</p>
</div>
</div>
|
从代码中可以看出，至少需要5个“容器”类代码，为了构成我们需要的圆角矩形，还需要做几个圆角图片。
●The design
首先来看看最终的外观：如图2
“我需要边界和拐角看起来和这个类似”，同时他告诉我们：“文章也许有不同的宽度和高度、而且他还不能肯定文章需要什么样的背景”，事实上、他也不能确定边框到底是什么样式。“能否给我们提供一种便与修改的开放式方式来管理边框呢？”他问到。
●The process
我
们已经将整个文章包含于“DIV”内，应用于左上角、顶端和左边。Header元素是默认的块级元素，我们将利用块级元素“继承”特性来设置宽度。使用
<h2>元素控制右上角页面布局。文章页脚部分也使用了一个“ div ”来确定布局包含的段落来确定右下角布局。
左、上以及左上角部分：
右边以及右上角部分：
底部，以及左下角：
右下角部分：
右边部分：
●The styles
接下来, 为包含整个文章的DIV容器设置边框和相对宽度：
div.Article {
width:35%;
border: 1px solid red; }
div.Article h2 {
border: 1px solid blue; }
div.ArticleBody {
border: 1px solid black; }
div.ArticleFooter {
border: 1px solid blue; }
div.ArticleFooter p {
border: 1px solid magenta; }
|
从上图中可以看到“类”：" ArticleBody "控制的“DIV”前后存在缺口(编者注：上下没有紧密结合，有距离)。先忽略这个问题，继续修改完善样式表。
以下是引用：
body {
background: #cbdea8;
font: 0.7em/1.5 Geneva, Arial, Helvetica, sans-serif;
}
div.Article {
background:
url(images/custom_corners_topleft.gif)
top left no-repeat;
width:35%;
}
div.Article h2 {
background:
url(images/custom_corners_topright.gif)
top right no-repeat;
}
div.ArticleBody {
background:
url(images/custom_corners_rightborder.gif)
top right repeat-y;
}
div.ArticleFooter {
background:
url(images/custom_corners_bottomleft.gif)
bottom left no-repeat;
}
div.ArticleFooter p {
background:
url(images/custom_corners_bottomright.gif)
bottom right no-repeat;
} |
还好，比我们想像的要好，不过显而易见，我们需要为各自元素添加“padding”，以保证边框布局看起来更好一些。其次，上面提到的缺口问题也会得到解决。形成“缺口”的原因是插入“段落”时回车所至。应尽量避免使用<P>元素从而绕过这个问题。
假定一个回车符等于“1.5em”,相当于我们指定了“line-height”行高，因此我先为ArticleBody和ArticleFooter容器设置 margin-top:-2em;。测试结果是大多数标准浏览器中都能正确地显示，
至于为什么设置 margin-top:-2em;，这个数值是经过不断的测试调整之后确定的。
继续完善样式表:
以下是引用：
div.Article {
background:
url(images/custom_corners_topleft.gif)
top left no-repeat;
width:35%;
}
div.Article h2 {
background:
url(images/custom_corners_topright.gif)
top right no-repeat;
font-size:1.3em;
padding:15px;
margin:0;
}
div.ArticleBody {
background:
url(images/custom_corners_rightborder.gif)
top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
}
div.ArticleFooter {
background:
url(images/custom_corners_bottomleft.gif)
bottom left no-repeat;
}
div.ArticleFooter p {
background:
url(images/custom_corners_bottomright.gif)
bottom right no-repeat;
display:block;
padding:15px;
margin:-2em 0 0 0;
} |
●Backward compatibility?
向后兼容性：如果使用 Netscape 4.x 浏览器观察这个例子的话，你会注意
到页面露出一点空白。还没有什么好办法解决这个问题，NS 4.x 不能解释类似 media = " all "，所以，一种代替的解决方案是隐藏不能
被浏览器正确执行的式样，，尽管这个方法比较麻烦，例如将字体大小规范从 ems 改为 pxs 。如果你需要向后兼容，就必需这么做。
●The real world
真实的世界：“Yeah，但是我们想要看真实的应用”，我们预先考虑到这个问题并提供了一个结构关系更加复杂的示例图
●Limitations
局限性：如果你注意的话，利用这种方法，需要提供合适的左上角/右上角……图形。如果右上角图片是透明的，那么在它之下的左上角图片就会显示出来，同理底部也一样。
另外一个利用CSS构建圆角矩形的实例：
(英文网站)
http://www.vertexwerks.com/tests/sidebox/