圆角

更新时间:2024-03-15 18:17

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

定义

圆角是用一段与角的两边相切的圆弧替换原来的角,圆角的大小用圆弧的半径表示。

创建方法

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格式的代码,目前不支持中文。

JQuery Corner

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

程序

向 div 元素添加圆角边框:

div{

border:2px solid;

border-radius:25px;

}

语法

border-radius : none | {1,4} [/ {1,4} ]?

取值

: 由浮点数字和单位标识符组成的长度值。不可为负值。

说明

border-radius是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:

1、border-radius: [ {1,4} ]; //这里只有一个值,那么top-left、top-right、bottom-right、bottom-left四个值相等

2、border-radius:[ {1,4} ] [ {1,4} ] ; //这里设置两个值,那么top-left等于bottom-right,并且取第一个值;top-right等于bottom-left,并且取第二个值

3、border-radius:[ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有三个值,其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right

4、border-radius:[ {1,4} ] [ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有四个值,其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left

前面,我们主要看了border-radius的缩写格式,其实border-radius和border属性一样,还可以把各个角单独拆分出来,也就是以下四种写法,这里我规纳一点,他们都是先Y轴在X轴,具体看下面:

border-top-left-radius: //左上角

border-top-right-radius: //右上角

border-bottom-right-radius: //右下角

border-bottom-left-radius: //左下角

在浏览器下的书写格式

1、Mozilla(Firefox, Flock等浏览器)

-moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角 等价于: -moz-border-radius: //简写

2、WebKit (Safari, Chrome等浏览器)

-webkit-border-top-left-radius: //左上角 -webkit-border-top-right-radius: //右上角 -webkit-border-bottom-right-radius: //右下角 -webkit-border-bottom-left-radius: // 左下角 等价于: -webkit-border-radius: //简写

3、Opera浏览器:

border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角 等价于: border-radius: //简写

4、Trident (IE)

IE<9不支持border-radius;IE9下没有私有格式,都是用border-radius,其写法和Opera是一样的,这里就不在重复。

为了不管是新版还是老版的各种内核浏览器都能支持border-radius属性,那么我们在具体应用中时需要把我们的border-radius格式改成:

-moz-border-radius: none | {1,4} [/ {1,4} ]? -webkit-border-radius: none | {1,4} [/ {1,4} ]? border-radius: none | {1,4} [/ {1,4} ]?

HTML代码

为了更好的看出效果,我们给这个demo添加一点样式:

.demo { width: 150px; height: 80px; border: 2px solid #f36; background: #ccc;}

注:如无特殊声明,本文实例所有基本代码格式如上所示,只在该元素上添加border-radius属性设置。

.demo { border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;}

这种写法我们前面有提到过,“/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,他们两都遵循TRBL的顺序原则。为了能让大家更清楚理解,我们把上面代码换成如下:

.demo { border-top-left-radius: 10px 20px; border-top-right-radius: 15px 30px; border-bottom-right-radius: 20px 10px; border-bottom-left-radius: 30px 15px;}

免责声明
隐私政策
用户协议
目录 22
0{{catalogNumber[index]}}. {{item.title}}
{{item.title}}