基本语法:

border-radius: 5px;

兼容大多数浏览器:

/*兼容Mozilla(Firefox, Flock等浏览器)*/

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;

/*兼容WebKit (Safari, Chrome等浏览器)*/
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;

/*兼容Opera浏览器*/
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

关于IE:

IE9 以下版本不支持 border-radius,而且 IE9 没有私有格式,都是用 border-radius,其写法和 Opera 是一样的

参考文章:

css3 boder-radius实现边框圆角(http://www.studyofnet.com/news/276.html)

css3实现边框圆角样式的更多相关文章

  1. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  2. css3(border-radius)边框圆角详解(转)

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

  3. css3(border-radius)边框圆角详解

    传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...

  4. CSS3: border-radius边框圆角详解

    border-radius 基本语法: border-radius : none | <length>{1,4} [/ <length>{1,4} ]? 取值范围: <l ...

  5. CSS border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  6. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  7. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  8. 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. css3如何实现圆角边框

    圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...

随机推荐

  1. mac 下安装 lua5.3 + cjson

    1.lua 5.3的安装 直接去官网下载 http://www.lua.org/ftp/lua-5.3.3.tar.gz make macosx sudo make install 2.CSJON 编 ...

  2. java初探/java读取文件

    import java.io.*; import java.util.Arrays; public class WriteText { public static void main(String[] ...

  3. MongoDB 备份(mongodump)恢复(mongorerstore) 导出 (Mongoexport) 导入( Mongoimport)

    MongoDB 备份(mongodump) 在Mongodb中我们使用mongodump命令来备份MongoDB数据.该命令可以导出所有数据到指定目录中. mongodump命令可以通过参数指定导出的 ...

  4. 每日学习心得:$.extend()方法和(function($){...})(jQuery)详解

    2014-02-09 前言: 节后头两天上班,主要是调整工作状态.项目也不是很紧,趁着周末把年前遇到了一些关于JS和JQuery的一些问题给总结一下.主要是介绍JQuery的extend方法和(fun ...

  5. 【MySQL】主备复制

    复制对于mysql的重要性不言而喻,mysql集群的负载均衡,读写分离和高可用都是基于复制实现.下文主要从4个方面展开,mysql的异步复制,半同步复制和并行复制,最后会简单聊下第三方复制工具.由于生 ...

  6. ORACLE随机查询

    1. select * from (select * from tablename order by dbms_random.value) where rownum< N; 注:dbms_ran ...

  7. Spark往Elasticsearch读写数据

    def main(args: Array[String]): Unit = { val sparkConf = new SparkConf().setAppName("DecisionTre ...

  8. ThinkPHP 3.2.3集成uploadify上传控件

    uploadify控件有一个坑爹的问题,就是文件上传时会session丢失,官方解释http://www.uploadify.com/documentation/uploadify/using-ses ...

  9. [DFNews] EIFT更新至1.2,支持iPhone4s及iPhone5物理获取

    俄罗斯厂商Elcomsoft近日更新了其旗下的iOS取证软件Elcomesoft iOS Forensic Toolkit,更新后的1.2版本支持针对iOS 4-6的iPhone 4s.iPhone5 ...

  10. Android UI 绘制过程浅析(三)layout过程

    前言 上一篇blog中,了解到measure过程对View进行了测量,得到measuredWidth/measuredHeight.对于ViewGroup,则计算出全部children的宽高进行求和. ...