斗牛几张牌算牛

書名： HTML5 Web Application Development By Example Beginner's Guide
作者名： J.M. Gustafson
本章字數： 279字
更新時間： 2021-08-13 16:50:23

Shadows

Adding shadows to elements and text is simple in CSS3. Use shadows to make certain elements really stand out and give a more natural look to your UI. There are many options for adding shadows, such as size, position, and color. Shadows don't always have to be behind elements and text; they can frame, highlight, and add effects to them too.

Box shadows

In addition to rounded corners, you can add shadows to elements using the new CSS3 box-shadow property. The box-shadow property takes a number of parameters that tells it how to draw the shadow:

box-shadow: h-offset v-offset blur-radius spread-radius color;

Here is an explanation of the parameters:

h-offset: The horizontal offset of the shadow. Negative values put the shadow to the left of the element.
v-offset: The vertical offset of the shadow. Negative values put the shadow above the element.
blur-radius: Determines the blur amount; the higher the number, the more blur (optional).
spread-radius: The size of the shadow. If zero, it's the same size as the blur (optional).
color: The color of the shadow (optional).
inset: Add inset to change shadow from outer to inner (optional).

Note

You can produce some interesting effects other than shadows with the box-shadow property. You can give an element an inner or outer glow by setting the offset values to zero and adjusting the blur and spread (see the previous two examples).

Text shadows

In addition to box shadows, CSS3 has support for text shadows using the text-shadow property. It works nearly identically to box-shadow and uses almost all the same parameters:

text-shadow: h-offset v-offset blur-radius color;

Like box-shadow, you can produce some interesting effects, such as glowing text:

官术网_书友最值得收藏!

HTML5 Web Application Development By Example Beginner's Guide

Shadows

Box shadows

Note

Text shadows