1. 首页
  2. 问答
  3. CSS3径向渐变边色不匹配的最终颜色停止各地

CSS3径向渐变边色不匹配的最终颜色停止各地

2011-10-08 66 views
3

考虑下面的HTML：CSS3径向渐变边色不匹配的最终颜色停止各地

<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。已验证在Chrome 14中的OS X 10.7上发生16，Safari 5.1，Firefox 7 & 9a2; Chrome 7中的Windows16，Firefox 7 & 9.0a2。

来源

2011-10-08 Andrew Marshall

回答

3

这是因为，根据the specs用于径向梯度函数的size参数的默认值是一个cover，所以圆定位成使得它试图覆盖所有正方形区域与具有阿尔法> 0

像素

所以，要解决它，请将此参数设置为contain：http://jsfiddle.net/kizu/FZAJM/1/ - 并且它将被修复。

来源

2011-10-08 18:09:07 kizu

+0

非常感谢！不知道“包含”选项，并且在翻阅文档时不知何故错过了它。另外，显然“包含”是“最靠近”的同义词。 –

相关问题

 相关问题