admin 管理员组

文章数量: 1184232


2024年5月25日发(作者：instrumental leader)

初步介绍

当然，我知道现在有成千上万个关于 用CSS处理圆角 的教程，但不管怎么说，我仍

然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这

篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还

没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。

第一步: 创建我们的 Sprite

1、为矩形圆角图片处理选择一款编辑器 (在这个案例中我选择的是Firework).

2、切割并且导出圆角到本地临时位置 (我们将会在之后用到).

3、新创建一个文件，将圆角导入到这个新文件中，复制三次，然后旋转这三个新切片

得到另外的三个圆角。

4、合成四个圆角为一张图片, 并用 1px 的红线 来区分它们.

5、导出合成图片，sprite 也就大功告成了。 第二步: HTML 代码

首先，我们会给容器 div 一个 .roundedBox

类 :

- 1 -

现在，我们必须再增加四个 div ，这会在将来创建圆角的时候用到。之后必须给每个

加载一个类 .corner，同时也标识一个类来指定它们格子的位置。

My content in roundedBox Type 1

一切搞定? 嗯，让我们把注意力再转移到 CSS 代码上来。

第三步: CSS 代码

如你所知, (或者您会在这里快速学习到) 绝对定位元素通常都依照相对定位的父元素

进行定位。. If this element is not defined, they will take as their parent

relatively-positioned element, the body tag.如果这个父元素无法界定，那么它会去最

近作相对定位的那个父元素，直至 body 标签。 哈?! - 好了，如果到此为止您仍没有掌

握，不用担心，我们将在第二部分了解它。（翻译得有点拗，附上原文：Ok, if you didn’

- 2 -


本文标签： 圆角 元素 图片

版权声明：本文标题：Dreamweaver中(网页)如何制作圆角边框总结 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1716647001a694770.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。