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

This article mainly explains "css3 how to achieve picture shadow effect", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "css3 how to achieve picture shadow effect" bar!

Css3 to achieve shadow attributes are: 1, text-shadow attribute, can achieve text shadow effect; 2, box-shadow attribute, can achieve frame shadow effect; 3, filter attribute, need to be used with drop-shadow () function, you can set a shadow effect to the image.

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

Implementing Shadow attributes with css3

1. Text-shadow attribute-to achieve text shadow effect

The text-shadow property is used to set text with shadows; you can set the pixel length, width, and blurred distance of shadows, as well as the color of shadows.

Css sets text shadow effect H2 {color: red; text-shadow: 3px 5px 5px # 656B79;} text shadow!

2. Box-shadow attribute-to achieve the border shadow effect

The box-shadow property applies shadows to text boxes, setting the pixel length, width and blur distance of shadows in, as well as the color of shadows.

Box-shadow can add shadows to elements, supporting the addition of one or more.

Box-shadow: X axis offset Y axis offset shadow blur radius shadow extended radius shadow color projection method

Parameters:

Note: inset can be written in the first or last parameter, other locations are invalid.

Shadow blur radius:

This parameter is optional, and the value can only be positive. If the value is 0, the shadow does not have a blurring effect, and the higher the value, the more blurred the edge of the shadow.

Css Code:

# box {width:50px; height:50px; background:#fff; box-shadow:4px 4px 15px # 666;}

Effect:

Shadow expansion radius:

This parameter is optional, the value can be positive or negative, if the value is positive, the entire shadow is extended and enlarged, and when the value is negative, it is reduced.

Css Code:

# box {width:50px; height:50px; background:#fff; box-shadow:4px 4px 15px-3px # 666;}

Effect:

X-axis offset and Y-axis offset values can be set to negative numbers

The X-axis offset is negative:

# box {width:50px; height:50px; background:#fff; box-shadow:-5px 5px 5px # 666;}

Effect:

The Y axis offset is negative:

# box {width:50px; height:50px; background:#fff; box-shadow:5px-5px 5px # 666;}

Effect:

Outer Shadow:

# box {width:50px; height:50px; background:green; box-shadow:5px 4px 10px # 666;}

Effect:

Inner Shadow:

# box {width:50px; height:50px; background:#fff; box-shadow:5px 4px 10px # 666 inset;}

Effect:

Add multiple shadows:

# box {width:50px; height:50px; background:#fff; box-shadow:5px 4px 10px # 666 inset, 3px 3px 5px pink, 6px 4px 2px green;}

Effect:

3. Filter attribute

The filter attribute defines the element (usually the

When used with the drop-shadow () function, you can set a shadow effect on the image.

Filter:drop-shadow (h-shadow v-shadow blur spread color)

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. Function accepts (defined in the CSS3 background) a value of type, except for the "inset" keyword. This function is similar to the existing box-shadow box-shadow property; the difference is that through filters, some browsers provide hardware acceleration for better performance. The parameters are as follows:

H-shadow v-shadow (required)

These are the two values that set the shadow offset. Set the horizontal distance. A negative value causes the shadow to appear on the left side of the element. Set the vertical distance. Negative values cause shadows to appear above the element. Check out possible units.

If both values are 0, the shadow appears directly after the element (blurring if and/or is set).

(optional)

This is the third code > value. The higher the value and the more blurred the shadow becomes larger and lighter. Negative values are not allowed if not set, the default is 0 (the boundary of the shadow is sharp).

(optional)

This is the fourth value. Positive values make shadows expand and enlarge, while negative values make shadows shrink. If not set, the default is 0 (the shadow will be the same size as the element).

Note: Webkit and some other browsers do not support the fourth length and will not render if you add it.

(optional)

View possible keywords and tags for this value. If not set, the color value is based on the browser. In Gecko (Firefox), Presto (Opera), and Trident (Internet Explorer), the value of the colorcolor attribute is applied. In addition, if the color value is omitted, the shadow in WebKit is transparent.

Img {- webkit-filter: drop-shadow (8px 8px 10px red); / * Chrome, Safari, Opera * / filter: drop-shadow (8px 8px 10px red);}

Set a shadow effect for the image:

Thank you for your reading, the above is the content of "how to achieve picture shadow effect in css3". After the study of this article, I believe you have a deeper understanding of how to achieve picture shadow effect in css3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.