How to add shadow to image with css

How to add a shadow to a picture with css: You can use the box-shadow attribute to add a shadow, such as [box-shadow: 10px 10px 10px rgba(0,0,0,.5);]. The box-shadow property can set one or more drop-down shadow boxes.

Property introduction:

The box-shadow property can set one or more drop-down shadow boxes.

(Learning video sharing: css video tutorial)

Grammar:

box-shadow: h-shadow v-shadow blur spread color inset;

Attribute value:

• h-shadow Required. The position of the horizontal shadow. Negative values ​​allowed

• v-shadow Required. The position of the vertical shadow. Negative values ​​allowed

• blur Optional. Fuzzy distance

• #spread Optional. The size of the shadow

• #color is optional. The color of the shadow. Find the full list of color values ​​in CSS Color Values ​​

• inset Optional. Change the shadow from the outer shadow (at the beginning) to the inner shadow

Code example:

Achievement effect:

Recommended tutorial: CSS tutorial

The above is the detailed content of How to add shadow to image with css. For more information, please follow other related articles on the PHP Chinese website!