Question

我们的想法是创建像这样的2.5D效果

DIV {
  width:100px;
  height:100px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  background-color:rgba(255,255,255,0.4);
  z-index:1;
  position:absolute;
  }

P{
  top:83px;
  position:absolute;
  z-index:0;
  }

<div>I appear to be layered on top</div>

<p>Ey! Get off me!</p>

所以基本上是半透明矩形周围的阴影。但是，WPF中的阴影效果与CSS中的box-shadow看起来不一样。首先，它会遮挡它所应用的实际不透明物体，而不仅仅是它周围的盒子。为了解决这个问题，我尝试在像这样的边界上应用它

    <Border BorderThickness="1px" BorderBrush="Black">
        <Border.Effect>
            <DropShadowEffect ShadowDepth="0"></DropShadowEffect>
        </Border.Effect>
    </Border>

但它在两个方面仍然不同

可见边框 - 好吧，我可以通过使用不透明度
阴影也被投射在边界的内侧 - 不是，它会破坏幻觉，我不知道如何解决它

是否有可能以某种方式切除对容器内部的影响？

Answer 1

如果将边框Background设置为白色，则边框的内部阴影会消失。现在，您可以将Border和TextBlock包装在画布中，并更改画布的不透明度。然后，您还需要为画布指定ZIndex以覆盖其他控件。

以下是此示例的代码：

    <Grid>
        <Canvas Name="Canvas" Width="100" Height="100" Grid.ZIndex="1" Opacity="0.8" >      
            <Border BorderThickness="1px" BorderBrush="Black" Background="White"
                    Height="{Binding ElementName=Canvas, Path=Height}" 
                    Width="{Binding ElementName=Canvas, Path=Width}">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="0"></DropShadowEffect>
                </Border.Effect>
            </Border>
            <TextBlock Foreground="Black" TextWrapping="WrapWithOverflow"
                       Width="{Binding ElementName=Canvas, Path=Width}"
                       Text="I appear to be layered on top"/>
        </Canvas>

        <TextBlock FontSize="25" Width="180" Height="50" Text="Ey! Get off me!" 
                    Margin="185,174,152,96"/>
    </Grid>

如何在容器内切出阴影？

1 个答案: