CSS等效的WPF LinearGradientBrush和RadialGradientBrush？

Question

以下XAML LinearGradientBrush和RadialGradientBrush的 CSS等效是什么？

<LinearGradientBrush
    StartPoint="0.5,0"
    EndPoint="0.5,1">
    <GradientStop Color="#FF484848"
                  Offset="0" />
    <GradientStop Color="#FF3b3b3b"
                  Offset="0.5" />
    <GradientStop Color="#FF484848"
                  Offset="1" />
</LinearGradientBrush>

<RadialGradientBrush>
    <RadialGradientBrush.RelativeTransform>
        <TransformGroup>
            <ScaleTransform CenterX="0.5"
                            CenterY="0.5"
                            ScaleX="2.6630001068115234"
                            ScaleY="2.3280000686645508" />
            <SkewTransform CenterX="0.5"
                           CenterY="0.5" />
            <RotateTransform CenterX="0.5"
                             CenterY="0.5" />
            <TranslateTransform X="0.51399999856948853"
                                Y="0.61900001764297485" />
        </TransformGroup>
    </RadialGradientBrush.RelativeTransform>
    <GradientStop Color="#19FFFFFF"
                  Offset="1" />
    <GradientStop Color="#19FFFFFF"
                  Offset="0.85699999332427979" />
    <GradientStop Color="#00FFFFFF"
                  Offset="0.84799998998641968" />
</RadialGradientBrush>

下图是示例输出：

Answer 1

WPF LinearGradientBrush的CSS等价物：

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
    <GradientStop Color="#FF484848" Offset="0" />
    <GradientStop Color="#FF3b3b3b" Offset="0.5" />
    <GradientStop Color="#FF484848" Offset="1" />
</LinearGradientBrush>

此代码说明了线性渐变的以下内容：

• 渐变从(0.5,0)开始，到(0.5,1)结束。 (0,0)和(1,1)是这些属性的默认值，它们指向左上角和右下角。因此(0.5,0)应该意味着 X轴上的{{1>}处的开始 ， Y轴<{1}} / strong>和结束位于 X轴上的50%， Y轴上的0%。因此，它是从顶部50%开始的水平梯度。
• 根据提供的详细信息here（参见最后一部分），似乎渐变重复覆盖父容器。
• 渐变中的颜色停止点为100%，0.5（即to bottom）和1（即0%）和颜色似乎以50%格式提供，表明100%为#AARRGGBB。

基于这些点，等效的CSS线性渐变代码如下：

alpha

1

.lineargrad{
    background-image: linear-gradient(to bottom, #484848 0%, #3b3b3b 50%, #484848 100%);
}

WPF RadialGradient画笔的CSS等效项：

.lineargrad{
    background-image: linear-gradient(to bottom, #484848 0%, #3b3b3b 50%, #484848 100%);
}
div{
    height: 50px;
    width: 200px;
    border: 1px solid;
}

此代码说明径向渐变的以下内容：

• 未指定中心点和半径，因此假设它们是<div class='lineargrad'></div>，这是默认值。
渐变的
• 颜色停止点似乎在<RadialGradientBrush> <RadialGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.6630001068115234" ScaleY="2.3280000686645508" /> <SkewTransform CenterX="0.5" CenterY="0.5" /> <RotateTransform CenterX="0.5" CenterY="0.5" /> <TranslateTransform X="0.51399999856948853" Y="0.61900001764297485" /> </TransformGroup> </RadialGradientBrush.RelativeTransform> <GradientStop Color="#19FFFFFF" Offset="1" /> <GradientStop Color="#19FFFFFF" Offset="0.85699999332427979" /> <GradientStop Color="#00FFFFFF" Offset="0.84799998998641968" /> </RadialGradientBrush> ，(0.5, 0.5)和84.79%处（大约）。颜色再次假设为85.69%格式。
• 100%（我认为）表示此渐变图像在 X轴中由#AARRGGBB 缩放，{{1}在 Y轴中翻译在{strong> X轴中TransformGroup， Y中{0}}轴即可。虽然我们可以通过设置266%来实现CSS中的缩放，但是没有简单的方法可以单独实现渐变图像的转换变换，我们只需要处理位置。

以下代码是将WPF的RadialGradientBrush转换为其CSS等价物的最接近的代码。

232%

51.4%

61.9%

如果需要background-size输出和.radialgrad { background-image: radial-gradient(ellipse at 101.3% 111.9%, rgba(255, 255, 255, 0) 84.79%, rgba(255, 255, 255, 0.09) 85.69%, rgba(255, 255, 255, 0.09) 100%); background-size: 266% 232%; } 输出的组合，那么我们可以用逗号分隔格式将这两个值应用于.radialgrad { background-image: radial-gradient(ellipse at 101.3% 111.9%, rgba(255, 255, 255, 0) 84.79%, rgba(255, 255, 255, 0.09) 85.69%, rgba(255, 255, 255, 0.09) 100%); background-size: 266% 232%; } div { position: relative; height: 50px; width: 200px; border: 1px solid; background-color: #222; }。 CSS能够处理多层背景图像，最后指定的那一层成为最底层。

<div class='radialgrad'></div>

linear-gradient

radial-gradient