是否可以給容器內的陰影？

Question

.part-two{ 
 
       float: left; 
 
       height:300px; 
 
       width: 200px; 
 
       background-color:green; 
 
       box-shadow: -10px -10px 1px red; 
 
      }

<div id="part-two" class="part-two"> 
 
       </div>

在上面的代碼我已經採用箱陰影屬性給出的外陰影

，代替的，我想給陰影在容器的內部，是有可能使用給內陰影box-shadow方法？如果是，如何？ 其他，是否有任何方法存在使用CSS給內陰影？

Answer 1

是的，它可以添加到inner-shadow元素，你只需要與properties在box-shadow添加inset一起。

inset關鍵字的存在將陰影更改爲 框架內的一個陰影（就好像內容在框內被壓下一樣）。插入陰影 被繪製在邊界內（甚至是透明的），高於 背景，但低於內容。

.part-two{ 
 
       float: left; 
 
       height:300px; 
 
       width: 200px; 
 
       background-color:green; 
 
       box-shadow: inset 0px 1px 10px 20px orange; 
 
}

<div id="part-two" class="part-two"> 
 
</div>

Answer 2

用於本

box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow; 

inset像這樣

.part-two{ 
 
       float: left; 
 
       height:300px; 
 
       width: 200px; 
 
       background-color:green; 
 
       box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow; 
 
      }

<div id="part-two" class="part-two"> 
 
       </div>

Answer 3

試試這個：

.part-two{ 
       float: left; 
       height:300px; 
       width: 200px; 
       background-color:green; 
       box-shadow: inset -10px -10px 1px red; 
      } 

Answer 4

使用此框box-shadow：10px 10px 0px 0px red inset;

.part-two{ 
 
       float: left; 
 
       height:300px; 
 
       width: 200px; 
 
       background-color:green; 
 
       box-shadow: 10px 10px 0px 0px red inset; 
 
      }

<div id="part-two" class="part-two"> 
 
       </div>

Answer 5

你在尋找這樣的事情？

.part-two 
 
{ 
 
float: left; 
 
height:300px; 
 
width: 200px; 
 
background-color:green; 
 
box-shadow: -10px -10px 1px red; 
 
-moz-box-shadow: inset 0 0 10px red; 
 
-webkit-box-shadow: inset 0 0 10px red; 
 
box-shadow:   inset 0 0 10px red; 
 
}

<div id="part-two" class="part-two"> 
 
</div>