首页 文章

Webkit边界半径有时会生效

提问于
浏览 次
17

此问题与CSS3 border-radius属性有关（http://www.css3.info/border-radius-apple-vs-mozilla/）

这个问题的一个例子是：

http://jamtodaycdn.appspot.com/bin/rounded.html

在这个URL中，我有圆形的div，看起来在FF3中是圆角的，但在Safari和Chrome上，圆角不存在 .

风格如下：

-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;

我很确定这个CSS格式正确，所以我对问题是什么一无所知 .

css webkit css3

4 回答

  • 1

    问题似乎出现在92px radia中 . 看起来20像素高div可以处理的最大半径是18px . 在这种情况下，92像素半径意味着什么并不一定明显 . 但是，您可以使用以下内容指定X和Y半径：

    -webkit-border-bottom-right-radius: 92px 18px;

    （注意，你不应该对多个HTML元素使用相同的ID . 你应该使用类，并调整你的CSS选择器，使其说.round而不是#round . ）

    回复于
  • 1

    对于任何提到圆角的帮助的人，我同意雅各布关于Webkit的答案，但问题还提到Chrome无法正常工作 . Chrome使用标准的CSS3圆角，与Webkit完全相同，但规则中没有前面的“-webkit-” . 这些如下：

    border-bottom-right-radius:2px;

    要考虑Firefox，Webkit和Chrome，您需要执行以下操作：

    -moz-border-radius-topright:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;

    第三组规则是CSS3规则，并受Chrome支持 . 这是使用CSS3Pie之类的东西在IE中获得圆角的好方法：http://css3pie.com/

    回复于
  • 14

    您不需要应用边框或边框宽度属性以及各种border-radius属性吗？

    此外，我注意到Safari将半径降低到某些半径值以上 - 尝试降低像素值并查看会发生什么 .

    回复于
  • 2

    简单类型只需使用：

    border-radius:92px 92px 2px 2px;

    哪里：

    border-radius:top right bottom left;

    回复于

相关问题