html 图片左上角圆角,圆角

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

中文名

圆角

外文名

Fillet

释    义

一段与角的两边相切的圆弧表示方式

用圆弧的半径表示

应    用

网页设计

创建方法

CSS3，CSS3+图片等

圆角定义

编辑

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

圆角创建圆角的方法

编辑

圆角CSS3

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

圆角CSS+图片

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

圆角纯CSS

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

圆角JavaScript

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

圆角圆角专利

编辑

苹果此前获得的诸多关于 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;

}[5]

圆角语法

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;}[6]

词条图册

更多图册

参考资料

1.

刘云华, 陈立平, 钟毅芳. 圆角特征识别研究[J]. 图学学报, 2004, 25(1):15-19.

2.

王亚洲. 用CSS 3新特性实现圆角效果[J]. 程序员, 2010(12):108-110.

3.

周剑强. 基于CSS技术的圆角矩形的实现[J]. 忻州师范学院学报, 2010, 26(5):28-30.

4.

樊东燕. 基于CSS Sprites的可伸缩圆角矩形的设计[J]. 电脑知识与技术, 2010, 6(11):2618-2619.

5.

张丽姿. 用DIV+CSS实现立体圆角边框效果[J]. 忻州师范学院学报, 2010, 26(5):33-35.

6.

金永霞, 陈正鸣. 改进的圆角特征识别与抑制方法[J]. 计算机应用, 2009, 29(8):2038-2042.