圆角简介

创建圆角的方法(CSS3 CSS+图片 纯CSS JavaScript)

在线资源(Rounded Corner 纯CSS圆角生成器 JQuery Corner)

圆角简介

圆角是用一段与角的两边相切的圆弧替换原来的角，圆角的大小用圆弧的半径表示。在网页设计越来越精美的今天，圆角的应用已经越来越广泛。

创建圆角的方法

CSS3

随着HTML5/CSS3的到来，CSS3样式的圆角必将成为构建未来网站的趋势。CSS3相对于其它方式，更加容易应用，不需要额外的HTML标记和图片。目前支持CSS3圆角的浏览器包括FireFox,Chrome,Opera,IE9等；由于目前中文用户多使用IE，并且多为IE6-IE8，因此，CSS3的普及尚需时日。

CSS+图片

CSS2圆角一般需要额外的HTML标记和图片，然而其优点也是非常明显的：支持所有主流浏览器，包括IE(6-9),FireFox,Chrome,Opera等。

纯CSS

纯CSS圆角，不需要图片，因此，网站加载速度更快，然而需要额外的HTML标记，并且效果也没有带图片的圆角精美。

JavaScript

JavaScript圆角不需要额外的HTML标记和图片，有现成的代码，一劳永逸。然而对于病毒泛滥的今天，很多用户会禁用JavaScript，对于用户体验至上的网站，如果用户关闭掉JavaScript，自己所有的一切努力也就白费了。

在线资源

Rounded Corner

Rounded Corner支持多种样式的圆角生成，可以生成标准圆角，带边框的圆角，带渐变色的圆角，并且可以集成CSS Sprite技术，从而加快网站加载速度，提高用户体验。

该工具支持中文。

纯CSS圆角生成器

SpiffyCorners可可以创建纯CSS格式的代码，目前不支持中文。

JQuery Corner

JQuery Rounded Corner作为JQuery的插件，是应用最广的JavaScript圆角插件。