您的位置：首页 > Web前端 > CSS

CSS3 berder-radius圆角矩形，box-shadow投影，各浏览器测试

2011-07-20 08:41 453 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3圆角 投影测试</title>
<style type="text/css">
.test{
width:480px;
height:272px;
background:#999;
border-radius:5px;
box-shadow:5px 5px 10px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>

经测试，只有火狐firefox可以完美同时支持这2个CSS3属性
谷歌chrome支持圆角，但是不支持投影
其他的话，IE 360 遨游，因为都是IE内核，所有都不支持

不过，重点来了，只要引入一个文件，就可以让IE 6 7 8 还有其他浏览器器全部支持
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3圆角投影测试</title>
<style type="text/css">
.test{
width:480px;
height:272px;
background:#999;
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
</style>
</head>

<body>
<div class="test"></div>
</body>
</html>

上面代码中最后一句引用的 ie-css3.htc文件的下载地址
下载此脚本：http://fetchak.com/ie-css3/ie-css3.htc

这里转一下别人的博客，因为他发现并修复了一个BUG，还提供了加强版的下载
http://bluehua.org/2010/07/04/1327.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 浏览器 css firefox safari chrome opera

相关文章推荐

新的分享

章节导航