webkit 无法在 Chrome 上运行

Question

直到上个月左右，一切都运行得很好，但自从 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;
}

Answer 1

供应商前缀的属性应出现在 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 */
}

供应商前缀和级联