如何切出容器内的阴影？

问题描述：

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>

创造2.5D效果所以基本上围绕一个半透明的长方形阴影。但是，WPF中的阴影效果与CSS中的阴影效果不一样。首先，它影响了它应用的实际不透明的事物，而不仅仅是它周围的一个盒子。要解决这个问题，我试着将它只是一个边境这样

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

但在2种方式

可见边界的仍然是不同的 - 多数民众赞成好，我可以将其纳入阴影与透明度
影子也投射在边框内打 - 也不行，它破坏了幻觉，我不知道如何解决它

它有可能someh ow切除了容器内部的效果？

答

如果将边框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>

如何切出容器内的阴影？

相关推荐