繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css 圆角边框
- CSS样式表
- 验证并修复css错误内容的相关工具
- 分享3个比较实用的CSS页面框架布局
- CSS幻灯片教程:制作高效可维护组件化的CSS代码
- 网页制作基础知识:html特殊符号
- CSS教程:按整洁易懂的结构组织CSS样式
- 查看和编辑CSS中用到的颜色:CSS Prism
- 帮助你学习CSS的在线CSS工具网站
- CSS网页设计参考:把HTML标记分类
- CSS进阶:几个Reset CSS的八卦问题
- WEB设计技巧:网页虚线制作方法剖析
- WEBJX收集CSS格式化和造型网页高级教程
- CSS3教程:在CSS中使用的颜色
- 学习WEB标准心得:网页重构的思路
- 轻易创建css导航工具:CSS Tab Designer2
- 总结学习web标准的十个重要理由
- CSS实例教程:CSS制作星级评价的功能
- CSS实例教程:纯CSS实现圆角框
- 多个css、js文件自动合并、压缩
- 网页设计教程:CSS文字排版技巧大全
- Photoshop制作CSS网页制作的背景图
CSS样式表 中的 css 圆角边框
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 66 ::
收藏到网摘: n/a
虽然这个东东已经被人写了无数遍了，不过为了加深记忆，我还是在写一遍了。
我想介绍一种比较灵活的圆角框，它可以水平和垂直扩展。需要使用四个图像：
我使用的图像和上面有点不同，只是四个边框。当宽度变小时，右边的图像会覆
盖左边的图像。当高度变小时，上面的图像会覆盖下面的。所以图像的覆盖顺序
是这样的（从被覆盖到覆盖）：
buttom-left <-- buttom.right <-- top-right <-- top.left
四个图像，需要四个Html元素，所以它的Html不可避免使用了额外的div，如下：
复制代码
代码如下:<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Header</h2>
<p>Content</p>
</div>
</div>
</div>
分别把四个图像应用在四个元素上，代码如下：
复制代码
代码如下:.box {
width: 20em;
background: url(images/buttomleft.gif) no-repeat
bottom left;
}
.box-outer {
background: url(images/buttomright.gif) no-repeat
bottom right;
}
.box-inner {
background: url(images/topleft.gif) no-repeat
top left;
}
.box h2 {
background: url(images/topright.gif) no-repeat
top right;
}
.box h2 {
padding: 20px 0 0 20px;
margin: 0;
}
.box p {
padding: 10px 20px 20px 20px;
margin: 0;
}
最后的效果如下（在段落里面加了一些内容）：
在这里面最关键的应用图像顺序问题，也就是图像覆盖的顺序。父元素背景总是覆盖子
元素的背景。
扩展阅读：CSSmaster上有一节专门介绍各种圆角框（3.2.1）
评论 (0) All
