Not applicable; text-shadow "text-shadow" can only be applied to text and does not work on images. If you want to add a shadow effect to the picture, there are two methods: 1. Use box-shadow border shadow, the syntax "box-shadow: horizontal shadow vertical shadow blur spread color inset;"; 2. Use filter filter, the syntax "filter:drop -shadow(horizontal shadow vertical shadow blur spread color);".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css created text shadow does not work for images.

Text shadow "text-shadow" can only be applied to text text and does not work on pictures.

      
  
文本阴影！
   

You can see that there is a shadow effect on the text, but not on the picture.

If you want to add a shadow effect to an image, there are two methods:

• box-shadow property

• filter:drop -shadow()

Let me introduce to you

1. Use the box-shadow attribute

box-shadow attribute Adds one or more shadows to the box.

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

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

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

• blur Optional. Fuzzy distance.

• spread Optional. The size of the shadow.

• color Optional. The color of the shadow. See CSS color values.

• inset Optional. Change the outer shadow (outset) to an inner shadow.

Example:

2. Use filter:drop-shadow()# The ##filter attribute defines the visual effect (for example: blur and saturation) of the element (usually).

drop-shadow() can set a shadow effect on the image. Shadows are composited underneath the image and can be blurred, offset versions of the matte that can be painted in a specific color.

Syntax:

filter:drop-shadow(h-shadow v-shadow blur spread color);

Example:

img { -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */ filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5)); }

(Learning video sharing:

web front-end development

)

The above is the detailed content of Is creating text shadow using css suitable for images?. For more information, please follow other related articles on the PHP Chinese website!