Question

这是一个治愈良好的话题，但我无法找到与我的确切问题相关的任何内容。我检查了很多！所以我的问题是，我在我的一个div上使用圆角而没有问题，然后我将css复制到我的第二个div，它位于第一个div之下。顶部的div有可爱的圆角，但位于下方的div在左上方有一个尖角。从我读过的内容以及border-radius属性的工作方式来看，我并不认为这是可行的。它在firefox，chrome和IE上做同样的事情。这是css和html的链接。 http://codepen.io/anon/pen/fDFoe

https://gist.github.com/anonymous/854d00138368832cf142
我将代码添加到codepen并且它工作正常，但是在所有浏览器中仍然存在尖角问题。任何帮助都会很棒。提前致谢

Answer 1

跨浏览器边界半径的一种解决方案

.my-block {
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  -khtml-border-radius: 10px; /* KHTML */
  border-radius: 10px; /* CSS3 */
  behavior: url(border-radius.htc); /* IE border-radius */
}

Answer 2

我怀疑这是因为你在角落里的形象。遗憾的是，您没有在Codepen示例中提供指向图像的工作链接，但是如果您将其注释掉

  <!--
  <img src="../../titles/the barn (Copy).jpg" alt="The Barn">
   -->

您可以看到border-radius实际上已正确应用。

Codepen Demo

图像是否有白色背景？也许你可以稍微移动它

圆角，1角保持尖锐的尖角

2 个答案: