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

This article introduces the relevant knowledge of "how to achieve the edge blur effect of pictures by css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In css, you can use the "box-shadow" attribute to achieve the image edge blur effect, just add the "box-shadow:0 0 blur distance shadow size # ffffff inset;" style to the picture element.

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

How to realize the blurring effect of picture edge by css

We can use the box-Shadow property to achieve the effect of blurring the edge of the image.

The syntax for this attribute is as follows:

Box-shadow: h-shadow v-shadow blur spread color inset

Where the box-Shadow property adds one or more drop-down shadows to the box. This attribute is a comma-separated list of shadows, each specified by 2-4 length values, an optional color value, and an optional inset keyword. The value for omitting length is 0.

Let's take a look at it through an example, which is as follows:

Document .img-edge-cover {width: 180px; height: 180px; position: relative;} .img-edge-cover:after {position: absolute; content:'; width: 100%; height: 100%; top: 0; left: 0; box-shadow:0 0 50px 30px # ffffff inset;} .img-edge-cover img {width: 180px; height: 180px; display: block; margin-bottom: 20px;}

Output result:

This is the end of the content of "how to achieve the edge blur effect of pictures in css". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.