IE8不支持border-radius,无法实现圆角的效果。
有个PIE插件,似乎能够达到让IE8支持圆角效果的。
官网似乎是 http://css3pie.com/,但是官网上没效果!别说是IE8了,9、10、11都没有圆角啊。火狐和google浏览器也都没有,奇怪了!
继续查找资料:
这个是比较全的介绍了,后面还有一些注意事项。
URL2:https://www.zhangxinxu.com/study/201007/pie-ie-css3-demo.html
这个网页上的和css3pie主页的一样,但是确实是有圆角效果了。
URL3:https://download.csdn.net/download/xiaoyaoyixian/7563175
这是csdn上的demo文件,也有效果的。
另外 最早找到的资料
URL4:http://www.ijquery.cn/?p=675
里面说PIE.attach(this);没必要,后面测试看看。
项目的需求是
在IE8下变成了
修改CSDN下载的文件中的例子,只留下需要的部分
<!DOCTYPE html>
<!--如果没有这一句,最底下的三角形会显示不出来-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>CSS3 PIE 圆角演示</title>
<style type='text/css'>
body {
background-color: blue;
}
.radiusContainer {
height: 100px;
width: 100px;
background: #999;
margin: 10px;
}
.radiusContainer img {
height: 100px;
width: 100px;
}
.pieRadius1 {
behavior: url(PIE.htc);
position: relative; /*如果没有这个属性,显示不出来*/
border-radius: 10px;
}
.pieRadius2 {
behavior: url(PIE.htc);
position: relative; /*如果没有这个属性,显示不出来*/
border-radius: 1em;
}
.pieRadius3 {
behavior: url(PIE.htc);
position: relative; /*如果没有这个属性,显示不出来*/
border-radius: 50%;
}
</style>
<!--[if lt IE 9]>
<script type="text/javascript" src="PIE_IE678.js"></script>
<![endif]-->
<!--[if IE 9]>
<script type="text/javascript" src="PIE_IE9.js"></script>
<![endif]-->
</head>
<body>
<div id="page">
<div id="tests">
<span class="radiusContainer pieRadius1"><img src="profile.png" class="pieRadius1"/></span>
<span class="radiusContainer pieRadius2"><img src="profile.png" class="pieRadius2"/></span>
<span class="radiusContainer pieRadius3"><img src="profile.png" class="pieRadius3"/></span>
</div>
</div>
</body>
</html>
实现效果:
最后把相关代码拿到项目页面中,实现UI设计的效果。
/*登录用户图片圈圈*/
#imgProfile {
margin: 10px;
position: relative;
border-radius: 50%;
behavior: url(PIE/PIE.htc);/*这个路径是相对于html页面的,不是css文件的*/
}
/*消息right圈圈*/
#amounts {
width: 30px;
height: 16px;
position: absolute;
top: 51px;
left: 75px;
text-align: center;
line-height: 16px;
color: #8695b2;
background-color: #FF548C;
color: white;
border-radius: 30px;
behavior: url(PIE/PIE.htc);/*这个路径是相对于html页面的,不是css文件的*/
}
behavior的url必须是相对于html页面的路径,就因为这个没弄对,我们的前端搞了半天没弄出来。
URL1后面的注意点中有提到这个路径,URL4中的例子的CSS不能用。