　　图5-22 将图片对齐到右上角显示出了圆角效果

　　按照代码顺序，容器之后的对象就是第一个段落，我们使用了一个class="desc"（desc表示description）来标记它。然后我们将rounded-left.gif对齐到top和left，它的上半部分作左上圆角。这里我们还将<p>对象的默认margin和padding都高为0。稍后我们再根据需要加上全适的padding值。

.container {
  float: left;
  color: #666;
  background: url(img/rounded-right.gif) top right no-repeat;
  }
.desc {
  margin: 0;
  padding: 0;
  background: url(img/rounded-left.gif) top left no-repeat;
  }

　　加上第二张背景图片后的结果见图5-23，左上圆角加好了。

　　图5-23 将图片对齐于左上角后，部分圆角效果出来了。

　　接下来，添加左下圆角，通过给第二个段落（我们给它标记了class="link"）指定rounded-left.gif的下面部分作为背景。这张图的上面部分，我们之前通过将图片对齐于top和left来显示，现在则将它对齐于bottom和left，以显示出下面的圆角。使用的间隔。第二个段落的三个侧边加了9px的padding,以此给内容和框的边界之间添加合适的间隔。第二个段落的左侧也加了9px的padding.这个值和图本身的宽度相同，以便让"Indestructible!"链接文字后面的圆角能显露出来。

.container {
float: left;
color: #666;

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