圆角css代码:border-radius只有在以下版本的浏览器:Firefox4.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式,对于老版的浏览器,border-radius需要根据不同的浏览器内核添加不同的前缀,比说Mozilla内核需要加上“-moz”,而Webkit内核需要加上“-webkit”等,那么为了能兼容各大内核的老版浏览器,我们看看border-radius在不同内核浏览器下的编写格式:
成都创新互联是一家专业提供大峪企业网站建设,专注与成都做网站、成都网站建设、成都外贸网站建设、HTML5、小程序制作等业务。10年已为大峪众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。
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的问题
网页网址:https://www.cdcxhl.com/article4/psocie.html
成都网站建设公司_创新互联,为您提供网站设计、静态网站、网站设计公司、关键词优化、品牌网站建设、网站维护
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联