带圆角半径的 WPF 插入阴影

Question

我正在尝试在 WPF 中模仿 css 带有圆角行为的嵌入阴影。

我尝试使用 Windows 主题中的 DropShadowEffect、SystemDropShadowChrome 和自定义 OpacityMasks 的不同组合，但我所有的解决方案都没有达到所需的阴影效果:(

只是一个规则的角边框开头：

<Border Width="100" Height="50" CornerRadius="30" BorderThickness="1" BorderBrush="Green" Background="White">
    <Border.Effect>
        <DropShadowEffect ShadowDepth="0" BlurRadius="5" Color="Blue"/>
    </Border.Effect>
</Border>

我想要达到的目标：

.shadow-div{
  width: 100px;
  height: 50px;
  border-radius: 34px;
  background: white;
  border: 1px solid green;
  box-shadow: inset 0px 3px 4px blue;
}

<div class="shadow-div"/>

Answer 1

你的意思是这样的吗:

我会在 Border 中使用 Border，外部 Border 有一个渐变画笔作为背景。

<Border Width="100" Height="50" CornerRadius="30" BorderThickness="1" BorderBrush="Green" Padding="2,4,2,1">
    <Border.Background>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="Blue" Offset="0"></GradientStop>
                <GradientStop Color="White" Offset="1"></GradientStop>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Border.Background>
    <Border Background="White"  CornerRadius="30" BorderThickness="1">
        <Border.Effect>
            <DropShadowEffect ShadowDepth="2" BlurRadius="7" Direction="90" Color="White" Opacity="1" />
        </Border.Effect>
    </Border>
</Border>

带圆角半径的 WPF 插入阴影

WPF inset shadow with corner radius

c#

css

wpf

xaml

shadow