border-radius兼容低版本ie解决方法

昨天写了篇bootstrap兼容低版本ie的写法，可以戳这里查看。然后突然想到很多设计在设计页面的时候都喜欢将元素设计成圆角的，于是便去查了下如何使低版本ie不用写很多背景定位就实现圆角效果，一查果然有这种好用的工具，这里就列出如何使用。

• css代码

position: relative;
z-index: 2;
border-radius: 50%;
behavior: url(css/ie-css3.htc);

• 注意点

1、只能同时4角圆角，不能单独设置；
2、div上可以正常使用，测试text文本框，会出现异常；
3、当前元素一定要有定位属性，像是position:relative或是position:absolute属性。
4、z-index值一定要比周围元素的要高，否则……只能说抱歉了

• 问题
  当你真正的按照上面的写法在项目里用上后，打开Ie发现并没有效果，心里暗暗的骂 '2 13'博主，写的什么东西，根本没法用啊！！！
  先别急，继续看下面的：

  没有效果，是因为ie下报错了，ie左下角有个黄色警告标志，点击开：

  
  
  

  error.png

  网上搜索，发现是浏览器的同源策略（这个词你应该经常听到，在跨域请求数据时）,本地静态调试确实不行。（备注：同源——域名，协议，端口号）

• 解决方法

在对应的目录下开一个http server， 再通过ie访问就成了。
开一个http server方法有很多，gulp，百度的fis，express都可以。

• gulp开启本地http server

1.你需要安装node.js
2.在命令行中进入项目所在文件夹，执行npm install --save-dev gulp gulp-connect
3.在根目录下新建gulpfile.js，里面内容为：
      var gulp = require('gulp');
      var connect = require('gulp-connect');
      gulp.task('webserver', function () {
          connect.server({
              port: 8888
          });
      });
      gulp.task('default', ['webserver']);
4.开启服务，命令行执行gulp
5.在浏览器中输入localhost:8888，就可以看到效果了

ie访问localhost会失败，需要设置下ie:

IE -Internet设置-连接-局域网设置-代理服务器后面的 高级 选项   
弹出的页面下方有个不使用代理服务器链接的地方 输入  *localhost 然后再试试

最后附上这个神奇的工具，请戳这里ie-css3.htc 。