ist es möglich, den Schatten im Container zu geben?

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>

in dem obigen Code i einen äußeren Schatten box-shadow Eigenschaft gegeben haben, daß anstelle von, dass ich den Schatten auf der Innenseite des Behälters geben wollen, ist es möglich, innere Schatten zu geben, mit Box-Shadow-Methode? Wenn ja, wie? sonst gibt es irgendwelche Methoden, inneren Schatten mit CSS zu geben?

Answer 1

Ja, es ist möglich inner-shadow auf ein Element hinzufügen möchten, müssen Sie nur inset zusammen mit Ihrem properties in box-shadow hinzuzufügen.

Das Vorhandensein des Schlüsselwortes inset ändert den Schatten zu einem innerhalb des Rahmens (als ob der Inhalt innerhalb der Box gedrückt wurde). Eingefügte Schatten sind innerhalb der Grenze (sogar transparente), über dem Hintergrund, aber unter dem Inhalt gezeichnet.

.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

dieser

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

inset als ähnliche

.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>

verwendet

Answer 3

Versuchen Sie folgendes:

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

Answer 4

Verwenden Sie box-shadow: 10px 10px 0px 0px roter Einschub;

.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

Sie auf der Suche nach so etwas wie das?

.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>