设为首页  
联系我们  
加入收藏  
网页制作 冲浪宝典 图形图像 操作系统 软件教学 编程开发 认证考试 安全技术 站长专区 文学驿站 娱乐天地 游戏天地 办公软件
文章搜索
您的位置: 首页 >> 文章首页 >> 网页制作 >> CSS >> 无懈可击的CSS圆角技术
精品推荐
CSS点击TOP10
·常用CSS大全
·网页制作知识:div+css 面试题目
·改变IE的字体大小设置时,页面字体不发生改变,怎样实现?
·网页特效代码:纯CSS制作的网页下拉菜单
·网页制作实例CSS用一张图片实现圆角
·用CSS实现图片垂直居中方法
·CSS:标准的 语义的 非侵入的页签切换
·CSS+JS打造类似QQ的网站导航菜单特效
·CSS:鼠标经过时改变背景颜色或图片
·CSS 属性表简表
网页制作点击TOP10
·菜鸟架设动网论坛全教程
·网页模板的使用方法 (教程)
·网页对联广告代码效果大全
·用JavaScript实现文件图片滚动效果
·如何做才能成为一名优秀的网页设计师
·用FrontPage 2000下载整个网站
·全面理解javascript的caller,callee,call,apply概念
·初学者入门:如何学习网页制作?
·常用CSS大全
·网页自适应不同浏览器和分辨率
精选专题

无懈可击的CSS圆角技术

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

无懈可击的CSS圆角技术(2)   <p class="desc">This box is:</p>  
  <p class="link"><em><a href="/browsers/firefox/">IndestrUCtible!</a></em></p>  
</div>
  一个作为容器的<div>和紧随其后的一个段落对象将作为前两个载体。要凑足四个,我们将链接“Indestructible!" 用第二个段落对象以及(这里引入了一个有争议的额外HTML对象)一个<em>对象包围起来。这里我使用<em>是因为,从技术角度来讲,我也打算让它个链接表达一种强调的意思。

  同时,我悄悄地加上这个对象。这是我打算避免的事情,但是本例的情况下,我们需要这个第四个对象,以便引入创建圆角的必要背景图片(图5-18)。


  图5-18 我们建的框的HTML代码给我们提供了四个可用作背景图片载体的对象

  结构图:


  2.图片的策略

  虽然我们需要引用四次背景图片(一个角一次),但可以借鉴Browse Happy网站所用的巧妙方案,它只需要用到两张GIF图片。我们先来看看图片本身,就能理解这种方法了。

  如图5-19所示,rounded-left.gif 是一张9个像素宽的GIF图片,包括左上方和左下方圆角。我们将它创建得比预期的高很多,以便能容纳大的内容量。


  图5-19 这张名为rounded-left.gif 的图片包括了左上和左下圆角

  再如图5-20 ,rounded-right.gif 是一张类似的图片:它负责显示右边的上下两个图角,以及上,右和下边线。这张图片和rounded-left.gif 的高度相同,并且也比原本所需的尺寸要宽很多。


  图5-20 rounded-right.gif 包括右上和右下圆角。这张图还带有框的上下边线

  现在我们来定位这此图片——并且这里就是精妙之处。图片rounded-left.gif 将对齐于top以形成左上方的角(图5-21),然后再次被使用,对齐于bottom,形成左下方的角。


  图5-21 当依附到顶边时,除非框增到足够大而被暴露,否则图片下面的圆角是显示不出来的

  只要框不会超过图片高,那么那个没有用上的,隐藏起来的圆角就不会显示((这也解释了为什么我们开始时将图片做得足够高)。相应的,对于rounded-right.gif,也会被使用两次——作为右上和右下圆角。

  运用最好的判断力来决定将这些图片做得多高和多宽,当然主要是取决于框内部会放些什么类型的内容。留出一些多作空间,以便应付意料之外的文字大小和内容量。

  现在我们继续操作,给HTML代码应用样式,并且将所有的设计整合在一起。
共5页 9 7 [1] [2] [3] [4] [58 :>

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