基本语法:

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. python requests库入门[转]

    首先,确认一下: Requests 已安装 Requests是 最新的 让我们从一些简单的示例开始吧. 发送请求 使用Requests发送网络请求非常简单. 一开始要导入Requests模块: > ...

  2. 黄聪:MySQL 按指定字段自定义列表排序

    问题描述 大家都知道, MySQL 中按某字段升序排列的 SQL 为 (以 id 为例, 下同): SELECT * FROM `MyTable` , , , ) ORDER BY `id` ASC ...

  3. Linux查看系统资源使用情况(转)

    概述: 用 'top -i' 看看有多少进程处于 Running 状态,可能系统存在内存或 I/O 瓶颈,用 free 看看系统内存使用情况,swap 是否被占用很多,用 iostat 看看 I/O ...

  4. 关于华为x2中的外置SDCard的使用

    一.前要 记录一下最近在开发生产过程中遇到的一个小问题.在使用x2的华为7寸平板时,由于需要大内存去录制视频,所以就使用X2自带的SDCard口,插入1个128G的SDCard卡.但是Android ...

  5. 理解Python装饰器

    装饰器本质上是一个Python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象.它经常用于有切面需求的场景,比如:插入日志.性能测试.事务处理.缓存.权 ...

  6. Semaphore tryAcquire release 正确的使用方法

    boolean permit = false; try { permit = semaphore.tryAcquire(1, TimeUnit.SECONDS); if (permit) { Syst ...

  7. phonegap(cordova)环境配置

    首先要配置好  java jdk 和 java jre 环境 配置之后 控制台  javac -version 查看是否配置成功 然后配置 Android sdk 配置之后 控制台 输入 adb 查看 ...

  8. Codeforces 721C [dp][拓扑排序]

    /* 题意:给你一个有向无环图.给一个限定t. 问从1点到n点,在不超过t的情况下,最多可以拜访几个点. 保证至少有一条路时限不超过t. 思路: 1.由无后向性我们可以知道(取决于该图是一个DAG), ...

  9. (整理)PowerDesign与EF的文档说明

    最近通过PowerDesign->SQLServer->VS的方式,将数据库设计.创建.实体模型生成等环节打通,发现VS中的Model竟然没有说明,然后就在园子里找了一下,发现了园友的文章 ...

  10. 安卓处理原始XML文件

    // 获取XML文档(Parser:剖析器) XmlResourceParser parser = getResources().getXml(R.xml.person); try { // 文档未完 ...