如果我使用具有多个停止的线性渐变,如下所示:

div
{
  border: 1px solid black;
  width: 100px;
  height: 2000px;
  display: inline-block;
  background-image: linear-gradient(to bottom, #383937 0, #001500 35px,
    #ffffff 35px, #b0b0b0 150px, #ffffff 150px, #ffffff 100%);
}

Firefox没有 问题.

Chrome 渐变颜色之间的过渡模糊.我正在重新使用一个位置来定义一种新颜色,所以在位置35,颜色立即从(#001500)变为#ffffff(或者至少应该).如果div更高,则渐变停止之间的模糊度会增加.

IE 有一些像铬一样的模糊,但不那么极端.就像在Chrome中一样,如果div更高,模糊性会增加.

http://jsfiddle.net/cyq7grdr/5/

firefox中的渐变:

铬的渐变:

当div不高时(1000px而不是2000px),chrome中的渐变:

编辑

看起来这是固定在chrome中,但在firefox中引入.如果有人能证实这一点,我会很高兴.

我希望能够在Silverlight中拥有动态渐变,如下所示:

<RadialGradientBrush GradientOrigin="0.20,0.5" Center="0.25,0.50" 
                     RadiusX="0.75" RadiusY="0.5">
  <GradientStop Color="{Binding Path=GradientStart}" Offset="0" />
  <GradientStop Color="{Binding Path=GradientEnd}" Offset="1" />
</RadialGradientBrush>

我绑定到两个返回类型"颜色"的属性,但我总是收到此消息:

AG_E_PARSER_BAD_PROPERTY_VALUE

如果我尝试绑定到GradientStop Collection,这也有同样的问题,这个问题的解决方案是什么:

1. 允许在运行时更改渐变的开始和结束
2. 适用于Silverlight 3.0,不是WPF解决方案

如果有工作或者无论如何都要复制这种行为,这是可以接受的,我有解决方案可以使用LinearGradients,因为我可以将某些东西"填充"属性绑定到此 - 但是在这种情况下不起作用,加上可能是我可能使用的其他渐变类型,其他人可能会在将来使用此解决方案/替代方案.

我有下面的代码。如何平滑地过渡渐变停止点？它只是突然从一种转变为另一种。

我的大多数渐变动画示例似乎都使用渐变位置，但我相信更改渐变停止点也应该是可能的。

.test {
    display: inline-block;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    background: conic-gradient(red, red);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: auto;
    -webkit-mask:radial-gradient(circle, transparent 50%, white calc(50% + 1px));

    animation:
        rotate
        4.5s
        ease-out
        0s
        infinite
        none
        running;
}

@keyframes rotate {
    0% {
        background-image: conic-gradient(red, red);
    }

    30% {
        background-image: conic-gradient(red 70%, transparent);
    }

    70% {
        background-image: conic-gradient(red 30%, transparent, transparent, transparent);
    }

    100% {
        background-image: conic-gradient(red, transparent);
    }
}

<div class="test"></div>

我已经转到解决方案资源管理器中的"参考",并尝试从参考管理器中"Assemblies"下的"Framework"添加它.在安装Service Pack方面是否有一些我缺少的东西？MSDN页面(http://msdn.microsoft.com/en-us/library/system.windows.media.gradientstopcollection.aspx)

在VS 2010中

请指教......谢谢!