当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文 |
|
||||||
CSS实例:无懈可击的CSS圆角技术 | ||||||
2009-3-5 18:05:31 文/未知 出处:PConline | ||||||
3.应用样式 因为不想给框赋予一个固定的宽度,并且还希望那些圆角总是紧挨着框中的内容,所以浮动这个容器。将容器浮动能防止框自动变得和窗体(或者其他外围容器对象)一样宽。取而代之,框里面的内容的宽度将决定框伸展多宽。
注意我们是通过将图片定位到对象的右上方来设置背景。 结果如图9,rounded-right.gif 的上面部分显示出来成为了整个容器的背景。 图9 将图片对齐到右上角显示出了圆角效果 按照代码顺序,容器之后的对象就是第一个段落,我们使用了一个class="desc"(desc表示description)来标记它。然后我们将rounded-left.gif对齐到top和left,它的上半部分作左上圆角。这里我们还将<p>对象的默认margin和padding都高为0。稍后我们再根据需要加上全适的padding值。
图10 将图片对齐于左上角后,部分圆角效果出来了。 接下来,添加左下圆角,通过给第二个段落(我们给它标记了class="link")指定rounded-left.gif的下面部分作为背景。这张图的上面部分,我们之前通过将图片对齐于top和left来显示,现在则将它对齐于bottom和left,以显示出下面的圆角。使用的间隔。第二个段落的三个侧边加了9px的padding,以此给内容和框的边界之间添加合适的间隔。第二个段落的左侧也加了9px的padding.这个值和图本身的宽度相同,以便让"Indestructible!"链接文字后面的圆角能显露出来。
最后一张背景图将附着在嵌套在第二个段落对象里面的<em>对象上。我们将rounded-right.gif对齐于bottom和right,显示图片的下面部分,另外好包括一定padding值,以便将框中的文字和边线有均匀的间隔。大多数浏览器会将<em>包围起来的文字显示为斜体,所以我们还要覆盖这个属性,显示正常的字体。
图12是最后完成的框的效果,通过对齐两张背景图片,创建好了四个圆角。
4.牢不可破的特性 正如Browse Happy例子那样的情况,请注意我们的圆角矩形框,根据其内部的文字大小和内容量的变化,能够在所有方向自由扩展和收缩。真正的牢不可破(图13)
|
||||||
最新热点 | 最新推荐 | 相关文章 | ||
CSS伪类选择器nth-child() css3教程:background属性调整增强 css教程:CSS3 Media Queries 详解 CSS 类名的长命名和短命名 CSS实例教程:非浮动区域设置宽度 如何使用css约束一个层不可见? CSS的list-style解释 小议使用“完整”的CSS的缺点 CSS中的相对定位与绝对定位详解 实例使用DIV+CSS制作圆角边框加阴影… |
关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |