圆角的一点思考
这段时间，友商网完成了第三次改版，收获了很多，挑其中的一点稍稍的进行了“深入思考比较学习分析研究参悟理解”。啰嗦的话说完了，正题……
应该不难发现，在目前的各大网站中，大量的采用了圆角去修饰边框，使得页面的呈现更加柔和，干净舒服。所以，友商网在这一次改版中也大量采用了这个样的设计，特别是二级页面的大部分元素框，就采用了时尚的银灰色调配上灰黑的圆角。在将设计稿实现成页面的时候，这个地方开始的确让我头疼，因为这些元素有很多相似的特点，也有一些不一样的地方，相似的是：
title是银灰色渐变x轴横向
底部圆角内凹度一样
而不一样的地方是，整个元素框宽度不一定一样，title高度也有两种，在看到绝大部分的频道设计稿后，我决定将这些元素框做成通用的结构和样式，希望能提高开发效率，省去了一次次重复的调试，也有利于不用的前端开发同事统一风格，整体提高开发速度。
实现的思想是这样的（可以说主要是滑动门的应用）：
1.将title的银灰条进行分离（其实也可以合在一起），作为两个结构元素（分别是h2和span）的背景，进行适应的拉伸
2.将内容载体也由两个标签元素来自适应构成（一个是class为eleOutter的div，另一个是class为eleInner的div）圆角图片分别作为这两个元素的背景
css：
.ele h2 {
background:transparent url(h2R.gif) no-repeat right top;
height:40px;
width:100%;
}
.ele h2 span {
background:transparent url(h2L.gif) no-repeat left top;
float:left;
height:40px;
line-height:40px;
padding-left:20px;
}
.eleOutter {
background:transparent url(eleLeft.gif) no-repeat left bottom;
padding-left:5px;
}
.eleInner {
background:transparent url(eleRight.gif) no-repeat right bottom;
}
XHTML：
< div class=”ele”>
< h2>< span>友商在线会计< /span>< /h2>
< div class=”eleOutter”>
< div class=”eleInner”>
< /div>
< /div>
< /div>
——————–
< h2>< span>友商在线会计< /span>< /h2>
< div class=”eleOutter”>
< div class=”eleInner”>
< /div>
< /div>
< /div>
——————–
改版过后，瞅了其他一些站点的做法，有些值得借鉴和学习。例如yahoo.com和雅虎口碑。
1.雅虎口碑
做法是最外围元素标签添加border，然后将四个圆角小图片定位到外围标签的四个角上颜色和外围元素border一样。
优点：使用的图片要小一点
缺点：但是使用了更多的标签去承载
2.yahoo.com首页的yahoo home的做法
有内外两个结构标签，内外的背景色都一样的，让内部元素样式为：
margin:-1px 1px;
border-color:#DEE6E9 rgb(88, 107, 122) rgb(88, 107, 122) rgb(222, 230, 233);
border-style:solid;
border-width:1px;
这样就能够将四个角的变成了还可以接收的圆角。
优点：没有使用任何图片，也能实现圆角效果
缺点：作为按钮还行
还有不少的做法，但是有的没有考虑扩展性，不能自适应内容的不同高度和宽度，有的太过耗资源，就不提了，如果你有什么好的更漂亮的做法，别忘了告诉我。。。
七月 18th, 2008 at 01:50
有更好的建议记得给我留言。。。。。。。
七月 18th, 2008 at 01:55
半夜顶一顶，继续吃烧饼。。。。。
十一月 20th, 2008 at 13:02
滑动门的想法不错，学习一下
十一月 20th, 2008 at 13:20
就是图片会大一点。。
十一月 30th, 2008 at 03:14
一张图片！一段JS！自适应内容的高度和宽度！以前公司做过！
十一月 30th, 2008 at 10:54
添加js貌似就要复杂点了。。。上面的方法都是不需要添加js的
十二月 3rd, 2008 at 10:46
不错的方法！
firefox的下载按钮好像就是第一种方式实现的
十二月 25th, 2008 at 11:54
不是很推荐这种做法~还是比较喜欢yahoo的方式，或者不用图，全用样式写出来，扩展性更强~
一月 14th, 2009 at 09:03
我也不是很推荐博主写的这种方法，这种方法有三点问题：
1.图片比较大、不方便处理，我想当内容部分的背景不是白色而是其它颜色时这个问题会比较明显；
2.扩展性不够好。这一个问题不是独立，博主采用的方法对图片的依赖比较大，如有改动感觉改动的地方比较多；
3.最后是本人的一点愚见，此方法在页面布局上逻辑不如文中事例1.雅虎口埤的清晰。博主的方法主要是利用层的背景色为透明，将层嵌套得到一个圆框。但在编写xhtml代码时，如果不查看样式表，可以说完全不知道为什么要这样写。而在雅虎口埤中层次比较清晰，可用三条横线将整个圆框划为四个部分：顶部圆角；标题部分；内容部分；底部圆角。代码量虽然大了，但胜在条理清晰，如果再给CSS的类起上个好名字，那就算只能看到xhtml代码也能很轻易的了解到编写者的意图
除去博主提到的三种圆角实现方法外，还有一种我比较推荐的方法：像素差，这种方法图片量更小（如果没有特殊需求可以完全不用图片）；层次清晰；但相应的代码量比较大，CSS写起来也比较吃力，圆角的效果也不如图片来得圆润。
七月 4th, 2009 at 11:31
可以参考淘宝的做法
边框+4个角的圆角图片
当图片还没加载时已经有一个边框…这样的感觉比较友好
十月 14th, 2009 at 14:52
其实如果不复杂的时候，从较少图片请求来说，没必要分成两张图。可以用一张就可以了
一张1000*2000的框图就能实验，通过设置background-position属性能更好优化访问速度。