求一个圆角矩形，简洁的css按钮样式。在ie ，Safari中都能显示的。

html-css016

求一个圆角矩形，简洁的css按钮样式。在ie ，Safari中都能显示的。,第1张

在chrome、firefox、safari、IE9+等浏览器中圆角很容易实现，代码如下：

.div{

  -webkit-border-radius:5px//webkit内核

  -moz-border-radius:5px//mozilla

  -ms-border-radius:5px//IE

  -o-border-radius:5px//opera

  border-radius:5px//假设你希望圆角的幅度是5px

}

但是在IE6/IE7/IE8等低版本浏览器中是不可能通过css实现圆角的，必须借助背景图片才能实现。

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)

}

圆形用圆角，比如div的高度宽度都是10px，那么圆角半径设置为5px就可以了。

div{height:10pxwidth:10pxborder-radius:5px}

三角形的话比较复杂，需要套几个框，然后再用transform旋转，而且边框也比较难处理，你可以百度下六角形div的实现手段。