• 浏览器兼容圆角Border-radius的问题


    圆角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前面加上相应的内核前缀,在实际应用中最好加上各种版本内核浏览器前缀。)

  • 相关阅读:
    log4net:ERROR XmlHierarchyConfigurator: Cannot find Property [File] to set object on [TF.Log.FileAppender]
    HTTP状态码总结
    基于.NET平台常用的框架整理
    WPF中查看PDF文件之MoonPdfLib类库
    查看操作系统报异常的地方
    VS 附加到进程 加载“附加进程”弹窗很慢
    C# for循环或者foreach往List中添加对象的时候前面的数据总被最后加入的覆盖
    方法的执行过程
    模拟IDE上的run过程
    Java动态加载
  • 原文地址:https://www.cnblogs.com/liumobai/p/5037170.html
Copyright © 2020-2023  润新知