CSS3 of Border-radius and Box-shadow and Text-shadow

Rounded Border Border-radius

Compatible to IE9.

border-radius:50%, the number in the back indicates the radius of the circle in that corner, and 50% is based on the width and height of the box.

border-radius:40px, also indicates that 4 corners are a circle with a radius of 40px.

border-radius:40px 50px 60px 870px, 4 parameter control: Upper-left corner, upper-right corner, lower-right corner.

Can also be written as:

border-top-left-radius:40px;

border-top-right-radius:40px;

border-bottom-right-radius:40px;

border-bottom-left-radius:40px;

-------------------------------------------------------------------------------------------------------

When using PX to make parameters, angle and angle do not affect each other, and when the width of the height of unequal, will not become an ellipse, will form a semicircle on the short side, while the long side still exists.

width:200px; height:400px; border-radius:2000px 2000px 0 0; It is visible whether the upper left and upper right sizes are more than width, and will not affect the semicircle as a radius of WIDTH/2.

-------------------------------------------------------------------------------------------------------

In particular, this can happen when you write this:

width:200px; height:200px; border-radius:200px 2000px 30px 30px;

It can be found that the 2000px setting has no effect, and 30px almost does not look very useful.

-------------------------------------------------------------------------------------------------------

width:200px; height:200px; border-radius:100px 100px 300px 400px;

When a corner has a radius that exceeds the maximum edge, it is no longer rendered in the normal way, and the effect of other elements is scaled down.

-------------------------------------------------------------------------------------------------------

width:200px; height:50px; border-radius:100%;

It can be seen that each of the two edges of the fillet is determined by the width and height, so it becomes an ellipse.

-------------------------------------------------------------------------------------------------------

width:200px; height:400px; border-radius:0 100% 0 0;

As a percentage, the attribute units are rendered as a radius based on the maximum edge (when the adjacent corner radius is 0 o'clock).

Shadow Box-shadow

compatible to IE9.

width:100px; height:100px; box-shadow:10px 20px 30px 40px red;

The first parameter is the right offset, the second parameter represents the downward offset, the third represents the radius of the solid part, and the fourth represents the radius of the blur part (this value can be omitted, and the default will be a little fuzzy radius, as to how much is unclear).

-------------------------------------------------------------------------------------------

You can also write multiple shadow values.

box-shadow:20px 30px 40px 50px Blue, 10px 20px 30px 40px Red, first written in "Above", "below" small will be covered.

-------------------------------------------------------------------------------------------

box-shadow:0px 0px 40px 50px blue, 0px 0px 10px 10px red inset; The back plus inset represents the inner shadow, and the inner Shadow can also be written multiple.

-------------------------------------------------------------------------------------------

In particular, when the blur radius is 0 o'clock there is no longer a feeling of shadow, BOX-SHADOW:0XP 0px 0px 24px. Looked like a border.

-------------------------------------------------------------------------------------------

border:10px solid red; box-shadow:0px 0px 0px 24px blue; If there is a border, the shadow will be "propped up".

-------------------------------------------------------------------------------------------

Text Shadow

Text-shadow and Box-shadow are written in the same way, but have no solid radius and are only compatible to IE10.

text-shadow:1px 1px 0px purple;

-------------------------------------------------------------------------------------------------------

Not all of the above written, in this point, there is misleading also please advise ^^.

CSS3 of Border-radius and Box-shadow and Text-shadow