1

直到上个月左右，一切都运行良好，但是自从 chrome 或 webkit 更新以来，似乎出现了问题，而我没有更改代码中的任何内容。

我进行了几次潜水，并使用 webkit css 使它们四舍五入，一个月以来，它们在 chrome 上不再四舍五入，在 safari 上运行良好。

.hostpie {
  -webkit-transform:rotate(0deg);
  width:148px;
  height:300px;
  -moz-border-radius:150px;
  -webkit-border-radius:150px;
  border-radius:150px;
  -webkit-border-radius:150px 0 0 150px;
  -webkit-transform-origin:right center;
}
4

1 回答 1

3

供应商前缀属性应该出现在CSS 属性之前，因为即使您的新版 Chrome 支持无前缀版本，它也会使用-webkit-border-radius: 150px 0 0 150px;，因为它出现在最后。将官方 CSS 属性放在最后可确保正确支持它的浏览器应用它。

并且正在做-webkit-border-radius: 150px;两-webkit-border-radius: 150px 0 0 150px;件不同的事情。后者针对左上角和左下角，而前者针对所有四个角。我不明白为什么你有两个？

尝试更改顺序

.hostpie {
 width:148px;
 height:300px;
-moz-border-radius:150px;
-webkit-border-radius:150px 0 0 150px; /* top left -- bottom left */
 border-radius:150px; /* CSS Property last */
}

供应商前缀和级联

于 2013-03-19T16:09:57.100 回答