Question

曲线边框适用于Firefox，谷歌浏览器但不能在IE上工作？任何想法如何让它工作？

-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;

Answer 1

不幸的是，IE6-IE8不支持圆形边框。相反，您需要使用类似CSS3PIE的内容。

IE9然而理解border-radius

进一步更新以评论它“无效” - 这是一个快速的步骤（这是一个非常简单的高级示例。

在http://css3pie.com/download-latest
将.htc文件保存在您网站的根目录中
假设你有一个id为foo的div：
```
<div id="foo">Hello, I'm rounded</div>
```

你的CSS可能是：

#foo { width: 500px; height: 200px; background: blue; -moz-border-radius: 12px; /* FF1-3.6 */
       -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
       border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */  }

您只需在CSS的底部再添加一条规则，如下所示behavior: url(/PIE.htc);

这将导致CSS3将边界半径规则应用于IE6-8。

Answer 2

它只适用于IE9，你必须使用CSS3标准。

Support for "border-radius" in IE

-moz和-webkit将无法在IE中使用，因为它们适用于其他渲染引擎。

Answer 3

使用在Photoshop中制作曲线边框.ping图像并使用它.....因为border-radius-bottomleft，border-radius-bottom right等不能在ie6-8上工作....只有边框-radius属性工作....

background-color: #E8EDEF;
    border-radius: 10px 10px 10px 10px;
    display: block;
    margin-left: 78px;
    width: 591px;
behavior: url(pie/PIE.htc);

border-radius-bottom right * /在ie6-8中不起作用

IE中的CSS曲线边框不起作用

3 个答案: