如何让IE7，8支持CSS3圆角的方法

html-css051

如何让IE7，8支持CSS3圆角的方法,第1张

css3的border-radius在IE7和8是不兼容的，即无效，那么如果要IE8及以下版本的浏览器兼容圆角，只能用图片来实现。即做一张圆角效果的图片，然后通过这张图片来实现圆角效果。

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：img { border-radius: 20px}。

3、浏览器运行index.html页面，此时页面插入的图片会自动显示圆角20px的。

border-radius:5px

ie下另写程序 圆角是好的，如下图

出现这种问题，估计是easyui中某个样式引起的吧~

解决方案：一种办法是把tab的背景 渐变一下，设置header-gradient-from，颜色和背景色相差无几，不过不好看

但有个缺陷是 无背景条的tab圆角有些问题 如上图中左上角的tab

这时就需要重写一下有背景的tab样式，效果如下

.tabs li.tabs-selected a.tabs-inner {

    background-color: #ffffff

    color: #0E2D5F

    background: -webkit-linear-gradient(top,#cccccc,#ffffff 100%)

    background: -moz-linear-gradient(top,#cccccc,#ffffff 100%)

    background: -o-linear-gradient(top,#cccccc,#ffffff 100%)

    background: linear-gradient(to bottom,#cccccc,#ffffff 100%)

    background-repeat: repeat-x

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc,endColorstr=#ffffff,GradientType=0)

}