gpt4 book ai didi

CSS3 径向渐变边缘颜色与周围的最终颜色停止不匹配

转载 作者:行者123 更新时间:2023-11-28 09:52:31 25 4
gpt4 key购买 nike

给定以下 HTML:

<body><div class="container"></div></body>

和 CSS:

body {
background-color: #e9f9e9;
}

.container {
height: 200px;
width: 200px;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #fcfffc), color-stop(100%, #e9f9e9));
background: -webkit-radial-gradient(#fcfffc, #e9f9e9);
background: -moz-radial-gradient(#fcfffc, #e9f9e9);
background: -o-radial-gradient(#fcfffc, #e9f9e9);
background: -ms-radial-gradient(#fcfffc, #e9f9e9);
background: radial-gradient(#fcfffc, #e9f9e9);
}

径向渐变的边缘与最终色标不匹配,因此与包含元素的背景色(与渐变的最终色标相同)不匹配,导致边缘颜色突然变化<div> .如何避免这种情况?

屏幕截图调整对比度和饱和度使问题明显:Screenshot with adjusted contrast & saturation to make the problem obvious

观看直播 jsFiddle .已验证在 OS X 10.7 的 Chrome 14 和 16、Safari 5.1、Firefox 7 和 9a2 中出现; Chrome 14 和 16、Firefox 7 和 9.0a2 中的 Windows 7。

最佳答案

那是因为,根据the specs径向渐变函数的 size 参数的默认值是一个 cover,因此圆的位置使其尝试用具有 alpha > 的像素覆盖所有正方形区域0.

因此,要修复它,请将此参数设置为contain:http://jsfiddle.net/kizu/FZAJM/1/ — 它将被修复。

关于CSS3 径向渐变边缘颜色与周围的最终颜色停止不匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7698497/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com