消费者往往仅凭视觉美感评判在线商店，因此店主宜使用醒目大图、美观字体及愉悦的曲线效果。
当曲线被应用于文本框或图像边框等位置时，视觉效果尤为突出。本期《实用电子商务》“网页设计技巧”专栏将展示如何仅用CSS弯曲网站边框角部，介绍W3C在CSS3中border-radius属性的最新进展，并探讨浏览器兼容性问题——微软Internet Explorer在此方面相对滞后。
CSS中的圆角边框
CSS即层叠样式表（Cascading Style Sheets），是W3C定义的“为Web文档添加样式（如字体、颜色、间距）的机制”。
以往设计师常借助图像或复杂JavaScript实现圆角，而CSS3的border-radius属性可轻松平滑尖锐边角。
该属性支持border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius、border-top-left-radius及border-radius标签。其中border-radius需接受两个长度值：
border-radius: 55pt 25pt;
据W3C说明，“border-radius的两个长度值定义四分之一椭圆半径以塑造角的形状。首值为水平半径；若省略第二值则等于首值（形成四分之一圆形）；若任一值为零则为方角。即使边框为‘none’，边框半径仍会使元素背景呈现圆角。”
2007年9月，联盟采纳了border-radius简写语法：
border-radius: TL TR BR BL; border-radius: TL BL+TR BR; border-radius: TL+BR TR+BL; border-radius: ALL;
应用至CSS中示例如下：
#wrapper { margin: 0px auto; width: 950px; border: #520b05 solid 5px; border-radius: 25px;}
浏览器兼容性
需注意浏览器兼容问题。目前Internet Explorer不支持此功能，且IE8亦不例外（因CSS3尚在开发中）。其他主流浏览器虽支持但需特定前缀，代码如下：
border-radius: 9px; /* CSS 3 */ -o-border-radius: 9px; /* Opera */ -icab-border-radius: 9px; /* iCab */ -khtml-border-radius: 9px; /* Konqueror */ -moz-border-radius: 9px; /* Firefox */ -webkit-border-radius: 9px; /* Safari */
总结
CSS3 border-radius属性能快速提升网站外观，但浏览器兼容性仍是挑战。
资源
- W3C的“border-radius”属性说明
- W3C 2007年9月北京决议 第四部分：CSS3边框
- CSS兼容性与Internet Explorer
- Bill Brown，边框圆角
- Border-radius：使用 CSS 创建圆角
- Spiffybox，轻松实现简单的圆角 CSS 盒子
- Spiffy Corners2
- 简单的圆角 CSS 盒子