is it possible to give the shadow inside the container? - html

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 the above code i have given an outer shadow using box-shadow property,instead of that i want to give the shadow on inside of the container,is it possible to give inner shadow using box-shadow method?if yes,how?
else ,is there any methods exists to giver inner shadow using css?

Answer 1

Yes it is possible to add inner-shadow to an element, you just need to add inset along with your properties in box-shadow.
The presence of the inset keyword changes the shadow to one inside the
frame (as if the content was depressed inside the box). Inset shadows
are drawn inside the border (even transparent ones), above the
background, but below content.
.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

Use this 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 3

used to this
box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow;
inset as like this
.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 4

you looking for something like this?
.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>

Answer 5

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