无懈可击的CSS圆角技术

作者: 来源:http://www.xgdown.com/ 时间:2007-9-14 8:06:56

无懈可击的CSS圆角技术(4)   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;
  }
　　到目前为止的结果见图5-24，四个圆角中有三个已经被加在了正确位置，还剩最后一个了。

　　图5-24 通过重用rounded-left.gif 但是对齐到下方，我们加上了第三个圆角

　　最后一张背景图将附着在嵌套在第二个段落对象里面的<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>变成一个块级对象，强制让它内部的任何内容都延伸到框的边界，就能解决这个问题了。此外我们将框中的链接文字设置为橙色，并且比正常情况大——因为，不可破坏的链接就该是这样子。

1.无懈可击的CSS圆角技术(1)
2.无懈可击的CSS圆角技术(2)
3.无懈可击的CSS圆角技术(3)
4.无懈可击的CSS圆角技术(4)
5.无懈可击的CSS圆角技术(5)

共5页 9 7 [1] [2] [3] [4] [5] 8 :>

无懈可击的CSS圆角技术相关文章：

·无懈可击的CSS圆角技术
·学习CSS从何入手？
·CSS设计网页：Firefox CSS私有属性备忘记录
·css优化：免费让你的站点加载得更快
·CSS制作网页实例：用CSS控制li标记样式
·CSS实战：利用CSS相对定位进行多行多列布局
·运用 CSS 的 absolute 与 relative 制作的提示
·常用的CSS知识
·DIV和CSS排版中制作细线条的几种方法
·CSS样式表技巧总结

无懈可击的CSS圆角技术相关软件：

·DVD Region+CSS Free V5.12 汉化版
·CSS Tab Designer ( 快速css导航栏生成) V2.0.0 绿色汉化版 CSS Tab Designer ( 快速css导航栏生成) V2.0.0 绿色汉化版
·CSS2.0手册 (苏沈小雨版)
·CSS层叠样式表手册

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。
转载请注明来源：http://www.xgdown.com