CSS3 Implement the Border-radius property of a rounded border and the Box-shadow property that implements the shadow effect

First of all I want to introduce is the Border-radius property, it is the role of the implementation of the rounded border, wherein border-radius:20px, said a ' body ' Four corners are sleek 20px, its value if 100px then the round angle is the highest, if the cube is a ball, Depending on this property, we can make a more beautiful button or control without PS6, and it has the property of controlling 4 corners separately border-top-left-radius/border-top-right-radius/ Border-bottom-left-radius/border-bottom-right-radius, this has a more accurate grasp of our control patterns.

The Box-shadow property is then introduced in detail to add a shadow to the border, where it has six important parameters.

1. Shadow type: This parameter is optional, if no value is set, the default shadow type is an outer shadow, and if its unique value "inset" is the inner shadow.

2.h-shadow: Must be, the horizontal offset of the shadow, its value can be positive negative, positive, its shadow on the right side of the object, negative, its shadow on the left side of the object.

3.v-shadow: Must have, the vertical offset position of the shadow, its value can also be positive negative, positive, its shadow at the bottom of the object, is a negative value, its shadow on the top of the object.

4. Shadow Blur: This parameter is optional, its value can only be positive, the value is 0 o'clock, indicating that the shadow does not have a blur effect, the larger the value, the more blurred the shadow edge.

5. Shadow expansion radius: The secondary parameter is optional, its value can be positive negative, if positive, the entire shadow expands, if negative, the shadow shrinks.

6. Shadow color: This parameter is optional (this property I will not explain, is our common color properties)

These two properties, together with the previously learned transition and transform properties, can be used to accomplish some of the Web site's common display styles

　　　　

CSS3 Implement the Border-radius property of a rounded border and the Box-shadow property that implements the shadow effect