CSS实例：无懈可击的CSS圆角技术

来源：52css 作者：佚名出处：巧巧读书 2007-11-15 进入讨论组

关键词：
internet
firefox
html
css
rip

访问 http://www.qqread.com/css/p381747.html

　　最后一张背景图将附着在嵌套在第二个段落对象里面的<em>对象上。我们将rounded-right.gif对齐于bottom和right,显示图片的下面部分，另外好包括一定padding值，以便将框中的文字和边线有均匀的间隔。大多数浏览器会将<em>包围起来的文字显示为斜体，所以我们还要覆盖这个属性，显示正常的字体。

　　.container {
　　float: left;
　　color: #666;
　　background: url(img/rounded-right.gif) top right no-repeat;
　　}
　　.desc {
　　margin: 0;
　　padding: 9px 9px 0 9px;
　　background: url(img/rounded-left.gif) top left no-repeat;
　　}
　　.link {
　　margin: 0;
　　padding: 0 0 0 9px;
　　background: url(img/rounded-left.gif) bottom left no-repeat;
　　}
　　.link em {
　　display: block;
　　padding: 0 9px 9px 0;
　　font-style: normal;
　　background: url(img/rounded-right.gif) bottom right no-repeat;
　　}
　　.container a {
　　font-size: 130%;
　　color: #e70;
　　}

　　通常情况，<em>是一个内联对象，不会自动扩展直至和父容器宽度相同，所以不能用于背景图片的载体。但能过添加规则display: block;，将<em>变成一个块级对象，强制让它内部的任何内容都延伸到框的边界，就能解决这个问题了。此外我们将框中的链接文字设置为橙色，并且比正常情况大——因为，不可破坏的链接就该是这样子。

　　图12是最后完成的框的效果，通过对齐两张背景图片，创建好了四个圆角。

CSS实例：无懈可击的CSS圆角技术（图十二）
　　图12 这就是我们的成品，“牢不可破”的矩形框