ie8实现border-radius(box-shadow)的效果_ie8 border-radius-CSDN博客

本文链接：https://blog.csdn.net/qq_36509946/article/details/98616013

项目中要求兼容ie8，但是border-radius并不兼容ie8，那么要怎样做到兼容呢？我在网上百度了解到一种方法是可以兼容ie8圆角的，所以就记录下来，方便以后的使用(box-shadow同样有用)

首先，看一下我们平时是怎么写圆角的

正常写法

如上图所示，ie8里的效果并不是我们想要的，我们希望ie8里面显示的也是个圆，所以这个时候主要就出来了。。。。

1.首先下载PIE.htc,下载地址https://github.com/downloads/lojjic/PIE/PIE-1.0.0.zip

2.解压后把PIE.htc放到与html平行的项目跟目录下

ie8下正常显示

3.上CSS代码：

div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            position: relative;
            z-index: 2;
            behavior:url(PIE.htc);
        }

4.有写人可能会说，就这样写了也没有效果，那么你可能没注意到，在你刷新ie8页面的时候，浏览器上部会弹出来一串信息

提示信息

点击允许就可以看到圆角了。。。

如果想在圆角的基础上在实现阴影的效果，直接加box-shadow就可以达到效果，代码及效果图如下所示:

好了，关于ie8圆角的问题就讲到这了，如果有问题，欢迎下方评论