我在尝试为某些 div 添加圆 Angular 时遇到了这个问题,但似乎找不到解决方案。我将此 css 用于分配给 div 的类:
-moz-box-shadow: 0px 5px 5px #cccccc;
-webkit-box-shadow: 0px 5px 5px #cccccc;
box-shadow: 0px 5px 5px #cccccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
以下是它在 Chrome、Safari 和 Opera 中的显示方式:
下面是它在 Firefox 和 IE9 中的显示方式:
看起来好像 Chrome 和其他浏览器中的背景以某种方式覆盖了顶部边框的背景颜色。唯一与彩色顶部边框关联的 CSS 是:
border-top:8px solid #333333;
有什么想法吗?
最佳答案
我怀疑这是浏览器如何选择呈现具有部分边框以及 border-radius
的框的问题。我认为如果不使用完全不同的方法,您无法自行解决这个问题(尝试为另一边设置白色边框?我不知道这是否可行)。
正在起草某种标准 the spec (特别是 §5.4 Color and Style Transitions )关于应该如何精确地渲染带有 Angular 半径的框边界,如果你想看看的话。但最终,如何绘制边框和圆 Angular 取决于浏览器,如果不进行合作,跨平台行为的一致性将难以实现。
关于Chrome、Opera、Safari 的 CSS3 边框半径问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5963696/