兼容性非常高的圆角边框DIV+CSS设计

首先打开Dreamweaver cs5，新建一个HTML文件，如图

稍微有点编写样式基础的人都可以知道，在编写css的时候，可以写在独立的文件里，也可以写在HTML文件里，在这里为了方便大家观看，我就直接写在HTML文件里了。注意的一点是，样式要写在标签里，并且是在双标签里面开始编写样式的，不然就会出错。如图

头部的代码：头部这一块一定要注意的事情是以“#”开始和以“.”开始的样式区别。其实效果是没有什么区别的，就是在应用的时候有区别，以“#”开始的样式在调用的时候就要用id='XXX'这样的方式去调用，而已“.”开始的就用class='XXX'。这一点要谨记！！

接下来就是部分了，在这里我把整个边框的宽度都定为了500px，这样更方便查看。

这里我解析一下结构，其实这个结构是非常简单的，就是分为上、中、下三个部分，其中上下的部分分别是                                        和                                        这两个部分应用的样式其实是一样的，仔细的朋友就会发现其实应用的样式就是倒过来的。想象一下就是必须要上下对称。产生圆角的原理也是很简单的，就是利用1px~2px来拉开边与边的重合，放大之后呈现的效果，如图，其实就是由四条横线往下排列构成的，缩小自然就成圆角了。

来看一下这个样式.boxtop, .boxbottom {display:block; background:transparent;font-size:1px;}这个background:transparent;意思是透明背景。这个颜色就视情况而定了额，你可以成跟你的整个页面的背景色一致也可以。