具有角半径的 WPF 插入阴影

Posted 2023-04-01

【中文标题】具有角半径的 WPF 插入阴影

【英文标题】：WPF inset shadow with corner radius

【发布时间】：2022-01-14 03:35:11

【问题描述】：

我正在尝试在 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"/>

【问题讨论】：

***.com/questions/61123720/… 类似问题，但技术不同（以防万一它可能有所帮助）

【参考方案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>

【讨论】：

不完全是我需要的，它在 CSS 版本中看起来仍然更自然，但我明白了你的想法，谢谢！会尝试使用不同的渐变参数:)