基本语法:

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. 【转载】MATLB绘图

    原文地址:http://www.cnblogs.com/hxsyl/archive/2012/10/10/2718380.html 作为一个功能强大的工具软件,Matlab具有很强的图形处理功能,提供 ...

  2. Python 特殊语法:filter、map、reduce、lambda

    Python内置了一些特殊函数,这些函数很具python特性.可以让代码更加简洁. 可以看例子: 1 filter(function, sequence): str = ['a', 'b','c', ...

  3. System.Windows.Media.Imageing.BItmapImage 这么用才不会占用文件

    // Read byte[] from png file BinaryReader binReader = new BinaryReader(File.Open(filepath, FileMode. ...

  4. 一些关于HTTP协议、表单和……的备忘

    几个概念 Ajax是一种技术.asp.net是一个库.json是一种数据格式.jquery是js的库(源码).ror是ruby on rails.python,就是python.Ajax和AJAX,后 ...

  5. Zookeeper全解析——Paxos作为灵魂(转)

    原计划在介绍完ZK Client之后就着手ZK Server的介绍,但是发现ZK Server所包含的内容实在太多,并不是简简单单一篇Blog就能搞定的.于是决定从基础搞起比较好. 那么ZK Serv ...

  6. Java中的代理模式

    代理模式在Java Web的框架中经常使用到.比如说在对数据库的访问中,核心功能是对数据库的增删改查,而连接数据库.处理事务等功能我们在开发中也要考虑到.所以我们将数据库的CRUD抽象到接口中,然后实 ...

  7. nbu恢复 oracle10g rac asm 到单实例asm(恢复某个表空间)

    一 检验条件 二 准备工作 1 创建相关目录 mkdir -p /oracle/admin/orcl/adumpmkdir -p /oracle/admin/orcl/bdumpmkdir -p /o ...

  8. 数据库 MySql(二)

    MySQL(二) 1.外键及连表 外键 一个特殊的索引,只能是指定内容 CREATE TABLE part1 ( nid INT NOT NULL auto_increment PRIMARY KEY ...

  9. PNG图片压缩工具

    https://tinypng.com/ 效果非常不错. 340k的图能压缩到140k左右. 视觉效果差距不大

  10. php rmdir使用递归函数删除非空目录

    我们大家都知道,php rmdir()函数用于删除空目录,但如果要删除非空目录,我们必须将非空目录中的文件或子目录删除,本文章向大家介绍php如何使用递归函数删除非空目录,需要的朋友可以参考一下.首先 ...