Html CSS等效于WPF LinearGradientBrush和RadialGradientBrush？

以下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>

下图是样本输出：

---

WPF LinearGradientBrush的CSS等效项：

该代码说明了关于线性渐变的以下内容：

• 渐变开始于

  （0.5,0）

  ，结束于

  （0.5,1）

  （0,0）

  和

  （1,1）

  是这些属性的默认值，它们指向左上角和右下角。因此

  （0.5,0）

  应该意味着梯度在X轴上的

  50%

  处开始，在Y轴上的

  0%

  处结束，在X轴上的

  50%

  处结束，在Y轴上的

  100%

  处结束。因此，它是一个从顶部到底部的水平梯度
• 根据提供的细节（请参阅最后一部分），渐变似乎会重复自身以覆盖父容器
• 渐变中的颜色停止点位于

  0%

  、0.5（即

  50%

  ）和1（即

  100%

  ）处，并且颜色似乎以

  #AARRGGBB

  格式提供，表示

  alpha

  为

  1

基于这些点，等效CSS线性梯度代码如下所示：

.lineargrad{
背景图像：线性渐变（至底部，#48480%，#3B3B3B50%，#4848100%）；
}

.lineargrad{
背景图像：线性渐变（至底部，#48480%，#3B3B3B50%，#4848100%）；
}
div{
高度：50px；
宽度：200px；
边框：1px实心；
}

---

空CSS。没有可见元素，因此无法将样式应用于it@Chris：我不知道WPF，但等效线性梯度应为中的一个。我完全迷上了径向梯度。你能给我们看一下输出的图像吗？@Harry刚刚上传了一个示例图像，因为我记得并非所有版本的浏览器都支持多背景，所以值得注意的是（我知道还有另一个使用伪元素的解决方案，例如

：before

，…）。是的，但考虑到微软从1月16日起已经放弃了对it和IE8的支持，这种支持还是相当不错的。@Chris很高兴你发现它很有用：）