CSS Corner Image / Radius

时间:2009-03-11 01:58:33

标签: css

我使用了这种角落风格:

.corners4{
    background:url(../img/panelHeaderColor.jpg) repeat-x;
    -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; 
}

但是,这在IE中不起作用,是否有IE等效于此? 感谢

5 个答案:

答案 0 :(得分:4)

如果删除属性的-moz-部分,则会有border-radius-topleft等等。这些是border-radius属性。这些仅在CSS3标准中。使用IE的当前跟踪记录,应该在2017年左右的某个时候支持CSS3。如果您希望它在Safari中工作,您可以使用-webkit-border-radius。有关圆角的更多信息,请参阅this question

答案 1 :(得分:1)

-moz-部分代表“Mozilla” - IE不支持此属性。

在所有浏览器中都没有相同的CSS。至少还没有。

弯曲的角落是使用javascript实现的背后的一个严重的痛苦,并且大多数解决方案不是非常强大。不幸的是,以所有用户将能够享受的方式实现这一目标的绝对最佳方式是使用您自己的图像作为角落的旧学校方式。 This website至少使这个过程更容易。如果你想进入JS解决方案,我听说过有关curvyCorners的好消息。

答案 2 :(得分:1)

很多次,IE似乎很棘手。总而言之,你会发现它不受支持,并且仍然有很多用户回到IE5.5左右。我会推荐一种不同的方法。

虽然我不记得我在哪里学到了它,但我可以给你我网站上的代码。

HTML元素之前的代码:

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>

元素之后的HTML代码

<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

CSS代码:

.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background: #000; margin:0 4px;}
.b2 {height:1px; background: #fff; border-right:2px solid #000; border-left:2px solid #000; margin:0 2px;}
.b3 {height:1px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}
.b4 {height:2px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 0px;}

上面的CSS代码,#000将成为你的边框颜色。 #FFF将会是 内容框的颜色。

您希望内容块上没有顶部边框和没有底部边框,但是然后将左右边框设置为1px,然后设置您想要边框的颜色。

根据您当前的实现情况,这可能看起来有点不太好看,并且可以随意添加更多b标签,应用相同的逻辑来获得更大的半径。如果你想要一个更大的半径并且无法弄明白,请告诉我,我会把它扩大到更大。

最后要注意的是,根据您放置这些内容的位置,您可能需要稍微调整边距设置。

答案 3 :(得分:1)

检查此网站:http://border-radius.com/它为WebKit,Gecko,CSS3生成css。 例如:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

答案 4 :(得分:0)

IE的角落半径问题将会解决。

http://kbala.com/ie-9-supports-corner-radius/