圆角
圆角是用一段与角的两边相切的圆弧替换原来的角,圆角的大小用圆弧的半径表示。在网页设计越来越精美的今天,圆角的应用已经越来越广泛。
基本信息
- 中文名
圆角
- 外文名
Fillet
- 释义
一段与角的两边相切的圆弧
- 表示方式
用圆弧的半径表示
- 应用
网页设计
- 创建方法
CSS3、CSS3+图片等
定义
圆角是用一段与角的两边相切的圆弧替换原来的角,圆角的大小用圆弧的半径表示。
创建圆角的方法
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,自己所有的一切努力也就白费了。
圆角专利
苹果此前获得的诸多关于 iPhone 和 iPad 的专利中或多或少都会包含一些实际的功能,比如 Home 键、背面轮廓设计或者前面板整体玻璃覆盖设计等。但此次获得的专利却单单描述了一个设备的外观设计,矩形圆角。这项专利的适用场景真的太广了,当然你可以说专利图中的画像将这项专利限制在特定长宽比的设备中,这样有着其他尺寸和比例的平板还是可以不侵权的。
圆角生成软件
Rounded Corner
Rounded Corner支持多种样式的圆角生成,可以生成标准圆角,带边框的圆角,带渐变色的圆角,并且可以集成CSS Sprite技术,从而加快网站加载速度,提高用户体验。
该工具支持中文。
纯CSS圆角生成器
SpiffyCorners可可以创建纯CSS格式的代码,目前不支持中文。