我相信 chrome 的边框颜色渲染可能存在错误。这是设置:
- 创建一个元素(我在 div 和 td 上都看到过它，包括 position:static 和 position:absolute)。
- 让这个物体的高度是它宽度的两倍以上
- 为每一侧分配不同颜色的边框。
- 指定圆 Angular 的 border-radius。
最终结果是左边缘的中间部分采用 border-right-color 而不是 border-left-color。具体来说，如果 w 是对象的宽度，则顶部 w 个像素和底部 w 个像素是正确的，但中间 (h - 2w) 个像素的颜色不正确。
这是演示该问题的代码片段和屏幕截图。
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html>
<head>
<style>
div#borderBug
{
position:absolute;
top:10px;
left:10px;
width:152px;
height:541px;
border-width: 2px;
border-style: solid;
border-radius: 20px;
border-left-color: blue;
border-top-color: yellow;
border-right-color: red;
border-bottom-color: green;
background-color: #dedede;
}
</style>
</head>
<body>
<div id="borderBug"></div>
</body>
</html>
我的 Chrome 版本是 17.0.963.56 m，在 Windows XP 上运行。我在 Safari、Firefox 或 IE8 中没有看到该问题。
任何人都可以确认这是否是一个已知问题，或者是否有人知道标准的解决方法？
我能想到的最好的解决方法是使用图像作为边框，但我还没有能够对此进行测试并查看它是否遇到相同的错误。
另一个(丑陋的)选项可能是将另一个正确颜色的 HTML 元素放在有问题的边框部分的顶部。
最佳答案
已确认的已知问题:
关于html - Chrome 在设置了边框半径的高大对象左侧使用了错误的边框颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9490027/