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

This article mainly introduces css3 how to achieve the rounded corners and shadows of the frame, the article is very detailed, has a certain reference value, interested friends must read it!

Css3, you can use the border-radius attribute to achieve fillet, syntax "border-radius: fillet radius value;"; you can use the box-shadow attribute to achieve shadow, syntax "box-shadow:X axis offset Y axis offset blur radius extended radius color projection;"

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

The fillet of the frame-border-radius

Square with rounded corners:

Border-radius:10px; / * all corners use fillets with a radius of 10px * /

Effect:

Solid upper semicircle:

Method: set the height (height) to half the width (width), and only set the radius of the upper-left corner and the upper-right corner to be consistent with the height of the element (which can also be greater than the height).

# box {half of the width of the width:80px; height:40px;/* * / background:skyblue; border-radius:40px 40px 00 * / the four values represent top, right, bottom and left * /}, respectively

Effect:

Solid circle:

Method: set the width (width) and height (height) values to be the same (that is, square), and the four fillet values are set to half of their values.

# box {width:80px; height:80px; background:skyblue; border-radius:40px;}

Effect:

Solid left semicircle:

Method: the width of the element is half the height, and the upper left corner and lower left corner are set to half the height.

# box {width:40px; height:80px; background:skyblue; border-radius:40px 0 040px;}

Effect:

Border Shadow-box-shadow

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;} Shadow extension 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;} X-axis offset and Y-axis offset can be set to negative values

The X-axis offset is negative:

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

The Y axis offset is negative:

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

Outer Shadow:

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

Inner Shadow:

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

Add multiple shadows:

# box {width:50px; height:50px; background:#fff; box-shadow:5px 4px 10px # 666inset, 3px 3px 5px pink, 6px 4px 2px green;} these are all the contents of the article "how to realize the rounded corners and shadows of the frame in css3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.