Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to set Picture Shadow in css

2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to set picture shadow in css". In daily operation, I believe many people have doubts about how to set picture shadow in css. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to set picture shadow in css". Next, please follow the editor to study!

Setting method: 1, use "box-shadow: horizontal shadow vertical shadow blur spread color inset;" statement; 2, use "filter:drop-shadow (horizontal shadow vertical shadow blur spread color)" statement.

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

There are two ways to set image shadows in css:

Box-shadow attribute

Filter:drop-shadow ()

1. Use the box-shadow attribute

The box-shadow property adds one or more shadows to the box.

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

H-shadow is required. The position of the horizontal shadow. Negative values are allowed.

V-shadow is required. The position of the vertical shadow. Negative values are allowed.

Blur is optional. Blur the distance.

Spread is optional. The size of the shadow.

Color is optional. The color of the shadow. See CSS color values.

Inset is optional. Change the outer shadow (outset) to the inner shadow.

Example:

Img {box-shadow: 10px 10px 10px rgba (0,0,0,.5); / * consider browser compatibility * /-moz-box-shadow: 10px 10px 10px rgba (0,0,0,0.5) -webkit-box-shadow: 10px 10px 10px rgba (0,0,0,.5);}

2. Use filter:drop-shadow ()

The filter attribute defines the element (usually the

Visual effects (for example, blur and saturation).

Drop-shadow () sets a shadow effect to the image. Shadows are combined under the image, can be blurred, and can be drawn in a specific color as an offset version of the mask image.

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

Example:

Img {- webkit-filter: drop-shadow (10px 10px 10px rgba (0,0,0,0.5)); / * consider browser compatibility: compatibility with Chrome, Safari, Opera * / filter: drop-shadow (10px 10px 10px rgba (0,0,0,0.5));}

At this point, the study on "how to set the shadow of a picture in css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report