如何切出容器內的陰影？

的想法是這樣的如何切出容器內的陰影？

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切除了容器內部的效果？

來源

2016-01-23 user81993

如果將邊框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>

來源

2016-01-24 00:41:04 Dave

如何切出容器內的陰影？

回答

相關問題