一、CSS3圆角的优点

  传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:

  * 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。

  * 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。

  * 增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。

  二、border-radius属性

  CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

  比如,下面是一个div方框:

  现在设置它的圆角半径为15px:

  border-radius: 15px;

  这条语句同时将每个圆角的"水平半径"(horizontal radius)和"垂直半径"(vertical radius)都设置为15px。

  border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

  border-radius: 15px 5px;

  border-radius: 15px 5px 25px;

  border-radius: 15px 5px 25px 0px;

  (左下角的半径为0,就变成直角了。)

  border-radius还可以用斜杠设置第二组值。这时,第一组值表示水平半径,第二组值表示垂直半径。第二组值也可以同时设置1到4个值,应用规则与第一组值相同。

  border-radius: 15px 5px / 3px;

  border-radius: 15px 5px 25px / 3px 5px;

  border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;

  三、单个圆角的设置

  除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:

  * border-top-left-radius

  * border-top-right-radius

  * border-bottom-right-radius

  * border-bottom-left-radius

  这四个属性都可以同时设置1到2个值。如果设置1个值,表示水平半径与垂直半径相等。如果设置2个值,第一个值表示水平半径,第二个值表示垂直半径。

  border-top-left-radius: 15px;

  border-top-left-radius: 15px 5px;

  四、浏览器支持

  IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4,都支持上述的border-radius属性。早期版本的Safari和Chrome,支持-webkit-border-radius属性,早期版本的Firefox支持-moz-border-radius属性。

  目前来看,为了保证兼容性,只需同时设置-moz-border-radius和border-radius即可。

  -moz-border-radius: 15px;

  border-radius: 15px;

  (注意:border-radius必须放在最后声明,否则可能会失效。)

  另外,早期版本Firefox的单个圆角的语句,与标准语法略有不同。

  * -moz-border-radius-topleft(标准语法:border-top-left-radius)

  * -moz-border-radius-topright(标准语法:border-top-right-radius)

  * -moz-border-radius-bottomleft(标准语法:border-bottom-left-radius)

  * -moz-border-radius-bottomright(标准语法:border-bottom-right-radius)

  五、注意事项

  虽然各大浏览器都支持border-radius,但是在某些细节上,实现都不一样。当四个角的颜色、宽度、风格(实线框、虚线框等)、单位都相同时,所有浏览器的渲染结果基本一致;一旦四个角的设置不相同,就会出现很大的差异。比如,下面这段代码在不同的浏览器中,渲染结果就相差很大。

  border-color: black;

  border-style: solid dashed;

  border-width: 1px 2px 3px;

  border-top-color: red;

  border-radius: 5%;

  另外,并非所有浏览器,都支持将圆角半径设为一个百分比值。

  因此,目前最安全的做法,就是将每个圆角边框的风格和宽度,都设为一样的值,并且避免使用百分比值。

=================================================================

css圆角边框的更多相关文章

  1. 第50天学习打卡(CSS 圆角边框 盒子阴影 定位)

    4.4圆角边框 圆角边框:  <!DOCTYPE html> <html lang="en"> <head>     <meta char ...

  2. DIV+CSS圆角边框

    简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: <style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,. ...

  3. CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影

    圆角边框: border-radius    一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...

  4. [css]《css揭秘》学习(四)-一个元素实现内圆角边框

    如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. <html> <head> <meta charset="utf-8"> < ...

  5. 如何实现css渐变圆角边框

    最近设计师的风格发生突变,一句话概括就是,能用渐变的地方绝对不用纯色.这不,就整出了一个渐变圆角边框.这渐变好做,圆角好做,渐变圆角也没问题,可是在加个边框还是有点坑的.没办法,看看怎么实现吧 bor ...

  6. 大神写的一个纯CSS圆角框,膜拜!(支持IE9一下的低版本)

    留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  7. css3:border-radius圆角边框详解 (变圆 图片)

    转:http://www.kuqin.com/shuoit/20141014/342620.html border-radius:50% 今天来聊聊这个border-radius属性,radius的英 ...

  8. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  9. 转:CSS圆角详解

    CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...

随机推荐

  1. 通过Small Basic把儿子/女儿带入编程的世界

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:今天是儿子3岁的生日,就来介绍一下适合给儿童培养兴趣的编程语言--微软Small Ba ...

  2. 2016 ACM/ICPC Asia Regional Dalian Online HDU 5877 Weak Pair treap + dfs序

    Weak Pair Problem Description   You are given a rooted tree of N nodes, labeled from 1 to N. To the  ...

  3. JFreeChart 使用一 饼图之高级特性

    原文链接:http://www.cnblogs.com/jtmjx/archive/2013/04/23/jfreechart_advantage.html 本文主要讲解JFreeChart中饼图的一 ...

  4. 完善SQL农历转换函数

    -------------------------------------------------------------------- --  Author : 原著:          改编:ht ...

  5. Hibernate的核心API

    Configuration:负责管理Hibernate的配置信息 1.加载核心配置文件 核心配置有两种: hibernate.properties 加载:Configuration configura ...

  6. LoadRunner常用函数列表

    LoadRunner常用函数列表 Web相关函数 函 数 功  能  描  述 web_custom_request 用户可以通过该函数自行创建一个HTTP请求的函数 web_image 模拟用户单击 ...

  7. Liferay 6.2 改造系列之二十二:如何发布WAR包

    1.修改web资源并发布 如果修改了默认主题信息,需执行portal-web中的build-themes任务: 执行portal-web中的deploy任务: 2.修改portal-impl中的jav ...

  8. RTTI (Run-Time Type Identification,通过运行时类型识别) 转

    参考一: RTTI(Run-Time Type Identification,通过运行时类型识别)程序能够使用基类的指针或引用来检查这些指针或引用所指的对象的实际派生类型.   RTTI提供了以下两个 ...

  9. android studio遇到的问题(记录总结)

    SDK 无法更新解决方案 这个问题不是Android Studio的问题,而且由一些一些众所周知的原因导致的,我们这里说下解决办法. 打开SDK Manager,停止更新连接:在界面上方找Tools- ...

  10. js:方法3. 对象

    Object.constructor object.constructor a = new Array(1,2,3); // Create an object a.constructor == Arr ...