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
border radius什么意思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-botto
m-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.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。