时间:2021-05-08
根据canisue(http://caniuse.com/#search=border-radius),border-radius兼容性如下图所示:
测试代码:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #header { width: 400px; height: 400px; margin: 10px; border-radius: 10px; border: 1px solid red; } </style> </head> <body> <div id="header"> </div> </body></html>IE8浏览器效果:
border-radius在IE8浏览器兼容方案:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #header { width: 400px; height: 400px; margin: 10px; border-radius: 10px; border: 1px solid red; behavior: url(PIE.htc); } </style> </head> <body> <div id="header"> </div> </body></html>IE8浏览器下效果:
PIE.HTC下载地址:http://css3pie.com/
PIE可以处理CSS3的一些属性,如:
IE8:兼容性主要是:
(1)不支持css3属性,使用PIE.js实现CSS3效果。
(2)media query
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
目前而言firefox,opera,chrome等主流浏览器都已经支持border-radius属性,唯独IE8以及之前。解决办法就是在用的border-rad
border-radius:CSS3圆角语法:border-radius:25px;椭圆边角:语法-border-radius:xx%;或者15px/100px
在企业网站建设过程中可能会碰到border-radius在IE6中不支持,border-radius是CSS3的标准,在IE6中不支持,但可以通过一些方式来实现
有四种方法可以实现圆角。 第一、直接写CSS代码:border-radius 例如:border-radius:4px;或者可以四个不同圆度:borde
复制代码代码如下:.rad{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px