css圆角问题 ie浏览器下设置圆角后,圆角哪里不透明,显示的是tab的颜色,如图

html-css06

css圆角问题 ie浏览器下设置圆角后,圆角哪里不透明,显示的是tab的颜色,如图,第1张

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)

}

有四种方法可以实现圆角。

第一、直接写CSS代码:border-radius

例如:border-radius:4px或者可以四个不同圆度:border-radius:4px 4px 3px 3px

顺序是左上角,右上角,右下角,左下角

第二、四个圆角贴图;制作四个圆角的图片,然后用css定义

第三、直接制作整个圆角矩形背景

第四、定义12个背景色:左上角4个,右上角4个,右下角4个,左下角4个。

<b class="rt"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b

class="r4"></b></b>

<b class="rb"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b

class="r1"></b></b>

<b class="rt"><b class="rb1"></b><b class="rb2"></b><b class="rb3"></b><b

class="rb4"></b><b class="rb5"></b></b>

<b class="rb"><b class="rb5"></b><b class="rb4"></b><b class="rb3"></b><b

class="rb2"></b><b class="rb1"></b></b>