Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawing a circle with inner box shadow

Tags:

css

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

like image 257
shubendrak Avatar asked Aug 31 '13 20:08

shubendrak


2 Answers

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;
like image 87
Guffa Avatar answered Oct 20 '22 06:10

Guffa


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

like image 27
Kevin Bowersox Avatar answered Oct 20 '22 07:10

Kevin Bowersox