Introduction to how to use CSS3 shadows

1. Border shadow

Standard syntax:

box-shadow: h-offset v-offset blur spread color [ inset ],...

[ partial The shift amount to the lower right is a positive value, and the upper left value is a negative value ]

a. If there are multiple shadows, separate them with commas, and stack them downwards in order, with the first one written on top

b. If there is an inset, it will be an inner shadow, but please note: if you simply add an inset to the original shadow, the shadow will be inside the opposite side, and it will not be simply flipped in the opposite direction.

c. The biggest benefit and effect of extending spread is to shield or reduce the interference to the other three sides when taking a negative value.

d. If the DIV inside the element is filled with color, the inner shadow will It is obscured by the colored part, but you can set the inner colored DIV to relative and set the z-index to -1 to display the blocked inner shadow.

[This situation is rare and has many limitations]

2. Text shadow

Standard syntax:

text-shadow: h-offset v-offset blur color,...

[The offset is positive to the lower right and negative to the upper left]

a. If there are multiple shadows, separate them with commas and order them Stack downwards, with the first thing written on top

Effect 2: Apple Style Effect

.demo4 { color: #000;
text-shadow: 0 1px 1px #fff; }

Effect 3: Photoshop Emboss Effect

.demo5 { color: #ccc;
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}

Effect 4: Blurytext Effect

.demo6 { color: transparent;
text-shadow: 0 0 5px #f96;}

Effect Seven: 3D text effect

.demo10 { color: #fff;
text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8 ),3px 3px rgba(197, 223,

The above is the detailed content of Introduction to how to use CSS3 shadows. For more information, please follow other related articles on the PHP Chinese website!