当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css 圆角边框

CSS样式表
CSS 书写有怎样的功能
FireFox中上层高度不影下层的解决办法
CSS text-shadow属性
CSS @import与link的具体区别
详解css 定位与定位应用
网页设计新手30条进阶秘技
CSS分栏布局的方法:绝对定位和浮动
针对IE8正式版的CSS hack
条件 CSS的使用
CSS 垂直居中五种实现方法
CSS教程 汇总让IE6崩溃的几种方法
左上角图片文字环绕在图片右侧
鼠标指向网页图片时图片周围显示虚线框
CSS 快速提升设计可读性和维护性
CSS3 完美实现圆角效果
网页排版 5个CSS基础
CSS3 圆角效果
HTML5 CSS3给网站设计带来出色效果
CSS 网页布局 表格制作实例
css 滚动条换色调整代码

CSS样式表 中的 css 圆角边框


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 115 ::
收藏到网摘: 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)