I want to draw few circle using inner box-shadow.
Here is my JsFiddle
css
.circle {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
border:1px solid #000;
}
How can i apply inner box-shadow in the circle
I want to draw few circle using inner box-shadow.
Here is my JsFiddle
css
.circle {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
border:1px solid #000;
}
How can i apply inner box-shadow in the circle
Specify inset
for the inner shadow, the x and y displacement, the blurring and the color. Example:
box-shadow: inset 3px 3px 4px #000;
Demo: http://jsfiddle.net/uJzgs/2/
For compatibility:
-webkit-box-shadow: inset 3px 3px 4px #000;
-moz-box-shadow: inset 3px 3px 4px #000;
box-shadow: inset 3px 3px 4px #000;
Why not use a radial-gradient
.circle {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
border:1px solid #000;
background: radial-gradient(#FFF 40%, #000);
}
Example http://jsfiddle.net/za7b8/1
box-shadow
instead would be that it has better browser support (IE9) and required fewer vendor prefixed variants, so less CSS code. Also, a gradient background may interfere if the OP wants an actual background image as well.