2017-10-20 06:33:45

圆角 免费编辑 添加义项名

B 添加义项
?
义项指多义词的不同概念,如李娜的义项:网球运动员、歌手等;非诚勿扰的义项:冯小刚执导电影、江苏卫视交友节目等。 查看详细规范>>
所属类别 :
艺术品
艺术品
编辑分类

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

基本信息

  • 中文名

    圆角

  • 外文名

    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 键、背面轮廓设计或者前面板整体玻璃覆盖设计等。但此次获得的专利却单单描述了一个设备的外观设计,矩形圆角。这项专利的适用场景真的太广了,当然你可以说专利图中的画像将这项专利限制在特定长宽比的设备中,这样有着其他尺寸和比例的平板还是可以不侵权的。

折叠 编辑本段 圆角生成软件

折叠 RoundedCorner

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

该工具支持中文。

折叠 纯CSS圆角生成器

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

折叠 JQueryCorner

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

折叠 编辑本段 程序

向 div 元素添加圆角边框:

div{

border:2px solid;

border-radius:25px;

}

折叠 语法

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

折叠 取值

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

折叠 说明

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

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

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

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

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

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

border-top-left-radius: <length> <length> //左上角

border-top-right-radius: <length> <length> //右上角

border-bottom-right-radius:<length> <length> //右下角

border-bottom-left-radius:<length> <length> //左下角

折叠 在浏览器下的书写格式

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 | <length>{1,4} [/ <length>{1,4} ]? -webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]? border-radius: none | <length>{1,4} [/ <length>{1,4} ]?

折叠 HTML代码

<div class="demo"></div>

为了更好的看出效果,我们给这个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;}

阅读全文

热点资讯

我的关注