推荐好文：无懈可击的CSS圆角技术

日期：2007年9月14日作者：查看:[大字体中字体小字体]

　　现在我们继续操作，给HTML代码应用样式，并且将所有的设计整合在一起。

　　3.应用样式

　　因为不想给框赋予一个固定的宽度，并且还希望那些圆角总是紧挨着框中的内容，所以浮动这个容器。将容器浮动能防止框自动变得和窗体（或者其他外围容器对象）一样宽。取而代之，框里面的内容的宽度将决定框伸展多宽。

.container {
  float: left;
  color: #666;
  }
　　除了将框左浮动，我们还设定了框中文本的基本颜色：深灰色。

　　接下来，按照我们的策略将这两张背景图片放到HTML代码中那四个可用的对象上。首先将右上角作为外围主窗口的背景，将rounded-right.gif依附于其右上位置，使用图片的上半部分。

.container {
  float: left;
  color: #666;
  background: url(img/rounded-right.gif) top right no-repeat;
  }
　　注意我们是通过将图片定位到对象的右上方来设置背景。

　　结果如图5-22，rounded-right.gif 的上面部分显示出来成为了整个容器的背景。

　　图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!"链接文字后面的圆角能显露出来。
上一页 [1] [2] [3] [4] [5] 下一页
推荐好文：无懈可击的CSS圆角技术相关文章：
·上网冲浪选谁更好七款主流网页浏览器评测
·网站优化的几个好经验
·哪种最好？6种在线杀毒扫描软件大比拼
·如何做好图片网站的搜索优化
·用消除人声好插件DeFX 电脑上唱卡拉OK
·学好Word文档管理
·保护好你的Wi-Fi网络
·用SNMP设置来管理好Cisco设备
·用好Excel 2007六则小技巧帮你节省时间
·迅雷把好关通过下载传播病毒难上加难
推荐好文：无懈可击的CSS圆角技术相关软件
·做人做事好心态
·做人做事好方法
·离奇神秘的情感遭遇《说好一言为定》
·秦林新作《管好你的嘴》
·做好每一个自己
·三好彻推理小说作品集》
·台湾“皇冠大众小说奖”百万首奖作品：《请把门锁好》
·《自己是最好的医生》
·好莱坞影星肖像100张（附简介）2-1
·做女人挺好（图集）

上一篇:修改Windows Vista操作系统登陆声效

下一篇:南方周末：攻击事件中国黑客被“黑”？

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

推荐好文：无懈可击的CSS圆角技术

精品推荐

热点TOP10

特别推荐