圆角css代码:border-radius只有在以下版本的浏览器:Firefox4.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式,对于老版的浏览器,border-radius需要根据不同的浏览器内核添加不同的前缀,比说Mozilla内核需要加上“-moz”,而Webkit内核需要加上“-webkit”等,那么为了能兼容各大内核的老版浏览器,我们看看border-radius在不同内核浏览器下的编写格式:

1、Mozilla(Firefox等浏览器)

-moz-border-radius-topleft: //左上角

-moz-border-radius-topright: //右上角

-moz-border-radius-bottomright: //右下角

-moz-border-radius-bottomleft: //左下角

等同于:

-moz-border-radius: //简写

2、WebKit ( 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 | {1,4} [/ {1,4} ]?

-webkit-border-radius: none | {1,4} [/ {1,4} ]?

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

其拆分开来的格式需要加上-moz和-webkit,上面的代码就等价于下面的代码:

-moz-border-radius-topleft:   //左上角

-moz-border-radius-topright:   //右上角

-moz-border-radius-bottomright:   //右下角

-moz-border-radius-bottomleft:   //左下角

-webkit-border-top-left-radius:    //左上角

-webkit-border-top-right-radius:    //右上角

-webkit-border-bottom-right-radius:   //右下角

-webkit-border-bottom-left-radius:    // 左下角

border-top-left-radius:   //左上角

border-top-right-radius:   //右上角

border-bottom-right-radius:   //右下角

border-bottom-left-radius:   //左下角

注:border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面,(特别声明:本文中所讲实例都只写了标准语法格式,如果你的版本不是上面所提到的几个版本,如要正常显示效果,请更新浏览器版本,或者在border-radius前面加上相应的内核前缀,在实际应用中最好加上各种版本内核浏览器前缀。)

浏览器兼容圆角Border-radius的问题的更多相关文章

  1. JS浏览器兼容问题

    一.JS与DOM的兼容性: (一) DOM节点的访问: 1.以前对DOM节点访问一般用“document.All.元素ID属性值”或者“document.元素ID属性值”这种简化的方法,在FireFo ...

  2. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  3. web前端~~浏览器兼容问题(百度)

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  4. 关于浏览器兼容问题及hack写法

    浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( ...

  5. WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  6. 【转】Web前端浏览器兼容初探

    原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...

  7. 多浏览器兼容用javascript获取url参数的方法比较推荐的一种

    多浏览器兼容用javascript获取url参数的方法比较推荐的一种 <script language = javascript> function request(paras){ var ...

  8. IE、FF、Safari、OP不同浏览器兼容报告

    IE.FF.Safari.OP不同浏览器兼容报告 1         浏览器内核简介 Trident IE浏览器(GreenBrowser绿色浏览器, 遨游浏览器....都是IE) Geckos Fi ...

  9. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

随机推荐

  1. tensorflow session会话控制

    import tensorflow as tf # create two matrixes matrix1 = tf.constant([[3,3]]) matrix2 = tf.constant([ ...

  2. 22. Bypass X-WAF SQL注入防御(多姿势)

    0x00 前言 X-WAF是一款适用中.小企业的云WAF系统,让中.小企业也可以非常方便地拥有自己的免费云WAF. 本文从代码出发,一步步理解WAF的工作原理,多姿势进行WAF Bypass. 0x0 ...

  3. ES Docs-2:Exploring ES cluster

    The REST API Now that we have our node (and cluster) up and running, the next step is to understand ...

  4. 实验楼Linux基础入门第一周

    &&使用oschina的git服务器 1.创建了项目 https://git.oschina.net/abc99/wyq20169314 2.配置项目 (1)为项目添加公钥 项目管理- ...

  5. 20165224 陆艺杰 Exp 8 Web基础

    .基础问题回答 (1)什么是表单 html的一个控件 表单在网页中主要负责数据采集功能 (2)浏览器可以解析运行什么语言 html xml jsp php python 等 (3)WebServer支 ...

  6. iOS无线真机调试

    打开xcode,选择Window > Devices and Simulators 用数据线连接设备 选择 Connect via network

  7. js怎样实现继承

    js实现继承的5种方式 js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对 ...

  8. P3823_[NOI2017]蚯蚓排队 哈希+脑子

    之前就写过一遍,今天却写挂了,查了半天发现是数组名写错啦$qwq$ 观察到$K$很小,所以使得我们可以哈希(怎么什么都能哈希$qwq$).我们把长度小于等于$50$的子串扔到哈希表里,并统计出现次数, ...

  9. scrapy可视化管理工具spiderkeeper使用笔记

    http://www.scrapyd.cn/doc/156.html  入门中文教程 spiderkeeper是一款开源的spider管理工具,可以方便的进行爬虫的启动,暂停,定时,同时可以查看分布式 ...

  10. 【手撸一个ORM】第七步、SqlDataReader转实体

    说明 使用Expression(表达式目录树)转Entity的文章在园子里有很多,思路也大致也一样,我在前面有篇文章对解决思路有些说明,有兴趣的小伙伴可以看下 (传送门),刚接触表达式目录树时写的,不 ...