CSS3 Shadows (Shadows)

Using CSS3, you can apply shadows to elements.

Using CSS3Shadows

CSS3Allow you to add shadow effects to elements like in Photoshop without using any images. In CSS3Previously, sliced images were used to create shadows around very annoying elements.

The next section will introduce how to apply shadows to text and elements.

CSS3 box-shadow property

box-The shadow property can be used to add shadows to the box of an element. You can even use a comma-separated list of shadows to apply multiple shadow effects. The basic syntax for creating box shadows can be given as follows:

box-shadow:　offset-x　offset-y　blur-radius　color;

The box-The components of the shadow property have the following meanings:

• offset-x —Sets the horizontal offset amount of the shadow.

• offset-y —Sets the vertical offset of the shadow.

• blur-radius —Sets the blur radius. The larger the value, the greater the blur, and the more blurred the edge of the shadow will be. Negative values are not allowed.

• color —Sets the color of the shadow. If omitted or not specified, it will takecolorproperty values.

Please refer to the CSS3 box-For more information on other possible values, see the shadow property.

.box{
　　　　width:　200px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　box-shadow:　5px　5px　10px　#999;
}

Similarly, you can add multiple box shadows by separating them with commas in a list:

.box{
　　　　width:　200px;
　　　　height:　150px;
　　　　background:　#000;
　　　　box-shadow:　5px　5px　10px　red,　10px　10px　20px　yellow;
}

CSS3 text-shadow property

You can use the text-The shadow property applies shadow effects to text. You can also use the same values as the box-Multiple shadows can be applied to text using the same syntax as the shadow.

h1　{
　　　　text-shadow:　5px　5px　10px　#666;
}
h2　{
　　　　text-shadow:　5px　5px　10px　red,　10px　10px　20px　yellow;
}