您现在的位置： 365建站网 > 365文章 > css\s special-圆角

css\s special-圆角

文章来源：365jz.com 点击数：227 更新时间：2009-09-16 11:47 参与评论

说到页面的圆角，很多designer都非常钟爱，我自己也非常喜欢。如果搭上阴影，效果简直perfect。在此记录我对圆角认识的愚见。
实现圆角的方法有很多，每个人有自己喜欢的一套，我有空也多总结一下实现圆角的方法。这里只说xhtml+css的。
一·不带背景图的圆角实现
用xhtml控制像素点和像素行，css控制像素点和像素行的大小分布。难点：计算各行的宽度，控制圆滑。
xhtml部分：

Code

css部分：

Code

二.利用背景图制作圆角。正确切图，适当自适应。
说到用背景图制作圆角，就必须进行正确的切图，图片尽量地小，进行自适应则可。有三种情况，高固定，宽固定，完全自适应。
高固定：只要切取左右两部分的圆角部分，中间自适应则可。
宽固定：跟高固定原理一样。
完全自适应：九宫格的原理，正确切取四角，中间自适应。可以用表格或div绝对定位或多重嵌套，我比较喜欢表格。
做了一个四周带边框的div绝对定位九宫格的例子，所以要取8张图（上下左右各1px宽的图，四角）。这个都会，上面两个肯定能搞出来的。
xhtml部分：

Code