Question

我需要为看起来像以下

的元素创建背景

enter image description here

是否可以使用渐变或其他技术实现此功能，还是必须使用图像文件？

这只是我遇到麻烦的背景，而不是投影效果。

Answer 1

如果你想只用一个元素来做，那就像是;

<Border Width="300" Height="75"
                BorderThickness="3"
                CornerRadius="5">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                    <GradientStop Color="#FFC4C3C3" Offset="0.429"/>
                    <GradientStop Color="#FFE9E9E9" Offset="0.652"/>
                </LinearGradientBrush>
            </Border.Background>
            <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFE9E9E9" Offset="0"/>
                    <GradientStop Color="#FFB9B6B6" Offset="1"/>
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Border.Effect>
                <DropShadowEffect Direction="280" Color="#FF515050" BlurRadius="2"/>
            </Border.Effect>
        </Border>

如果你想在渐变中使用曲线，那么就像;

<Grid Width="300" Height="75">
        <Border 
                BorderThickness="3"
                CornerRadius="5">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                    <GradientStop Color="#FFC4C3C3" Offset="0.429"/>
                    <GradientStop Color="#FFE9E9E9" Offset="0.652"/>
                </LinearGradientBrush>
            </Border.Background>
            <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFE9E9E9" Offset="0"/>
                    <GradientStop Color="#FFB9B6B6" Offset="1"/>
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Border.Effect>
                <DropShadowEffect Direction="280" Color="#FF515050" BlurRadius="2"/>
            </Border.Effect>
        </Border>
        <Path Data="M0,0 L300,0 L300,40.768158 L296.83832,41.189522 C253.5976,46.794456 203.45944,50.000004 150,50.000004 C96.540565,50.000004 46.402409,46.794456 3.1617098,41.189522 L0,40.768158 z" Fill="#FFDADADA" Margin="3" Height="50" VerticalAlignment="Top" Stretch="Fill" UseLayoutRounding="False"/>
        </Grid>

你当然需要玩你的颜色和尺寸才能得到你想要的东西，但这应该是一个适合你的好地方。干杯

具有形状的渐变

1 个答案: