c# - 在 WPF 中重现 CSS kbd 样式？ (box-shadow, border-radius, text-shadow)

Question

我希望在 WPF 中创建一个热键页面，在其中显示应用程序中所有可用热键的图形表示。与其使用图标，因为我找不到包括 Home 键的好图标集，例如我想使用与 StackOverflow 类似的样式。

我正在尝试复制并应用以下样式:

F4

CSS 是:

kbd {
    padding: 0.1em 0.6em;
    border: 1px solid #CCC;
    font-size: 11px;
    font-family: Arial,Helvetica,sans-serif;
    background-color: #F7F7F7;
    color: #333;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px #FFF inset;
    border-radius: 3px;
    display: inline-block;
    margin: 0px 0.1em;
    text-shadow: 0px 1px 0px #FFF;
    line-height: 1.4;
    white-space: nowrap;
}

我似乎无法找到一种方法来重现框阴影(尤其是两个)、边框半径和文本阴影。

或者，如果有人知道可以使用的键盘键的完整图标集。

这是我目前拥有的，但它看起来远不及它应该拥有的:

<Border BorderThickness="1" CornerRadius="3" Background="#FFF7F7F7"
        HorizontalAlignment="Center" VerticalAlignment="Center">
    <Border.Effect>
        <DropShadowEffect ShadowDepth="1" BlurRadius="3" Color="#33000000" Direction="270"/>
    </Border.Effect>
    <Border BorderThickness="1" CornerRadius="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Border.Effect>
            <DropShadowEffect ShadowDepth="1" BlurRadius="3" Color="#FFFFFFFF"/>
        </Border.Effect>
        <TextBlock Padding="1.1 6.6" FontSize="11" FontFamily="Arial,Helvetica,sans-serif" Foreground="#FF333333">HOME</TextBlock>
    </Border>
</Border>

Answer 1

试试这个:

<Border HorizontalAlignment="Center" VerticalAlignment="Center"
        Background="#FFF7F7F7"
        BorderThickness="1" BorderBrush="#FFCCCCCC" CornerRadius="3">
    <Border.Effect>
        <DropShadowEffect ShadowDepth="1" BlurRadius="0" Direction="270" Opacity="0.2"/>
    </Border.Effect>
    <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
            BorderThickness="2" BorderBrush="White" CornerRadius="3">
        <TextBlock Padding="1.1 6.6" FontSize="11" FontFamily="Arial,Helvetica,sans-serif" Foreground="#FF333333">
            <TextBlock.Effect>
                <DropShadowEffect BlurRadius="0" Color="White" Direction="270" ShadowDepth="1"/>
            </TextBlock.Effect>
            HOME
        </TextBlock>
    </Border>
</Border>