14th: Using CSS3 for enhancement

1. Use Polyfill for browsers that do not support certain properties: If you want to bridge the functional differences between the weaker browsers and the stronger browsers, you can use Polyfill (often called shims), which is usually implemented with JS. But some of the weaker browsers run JS much slower.

2. Create rounded corners for elements:

(1) Create four identical rounded corners for the element:

. all-corners{

-webkit-border-radius:r

Border-radius:r

The r here is the value of the fillet radius

(2) Create a fillet for the element:

. one-corner{

-webkit-border-top-left-radius:r

Border-top-left-radius:r

The r here is the value of the fillet radius

Create top right corner: replace Top-left with Top-right

Create the bottom right corner: replace Top-left with Bottom-right

Create the bottom left corner: replace Top-left with Bottom-left

(3) Create an ellipse angle for the element:

. elliptical-corners{

-webkit-border-radius:x/r

Border-radius:x/r

}

The x here is the radius of the rounded corner in the horizontal direction, and Y is the radius of the fillet in the vertical direction.

(4) Create a circle:

. circle{

-webkit-border-radius:r

Border-radius:r

}

Here the R is the radius of the circle size.

3. Each major browser has its own prefix:

-webkit-(support for older Android, iOS, and Safari),-moz-(Firefox),-ms-(IE),-o-(Opera) should place the prefix in front of the CSS property name.

4. Add a shadow to other elements:

You can use the Text-shadow property to add a shadow to the text of an element, and you can use the Box-shadow property to add a shadow to the element itself. The Box-shadow property accepts six values: a x-offset with a length unit, a y-offset with a length unit, an optional Blur-radius with a length unit, an optional inset keyword, an optional spread value with a length unit, and a color value. If you do not specify a value of Blur-radius and spread, the default is 0.

5. Add a shadow to the element:

(1) Input-webkit-box-shadow:

(2) Enter the values for: X-offset, Y-offset, Blur-radius, spread, and color, respectively.

(3) Input Box-shadow: Repeat the previous step.

6. Create an inner shadow:

(1) Input-webkit-box-shadow:

(2) Enter values that represent X-offset, Y-offset, Blur-radius, spread, and color, respectively

(3) Enter inset after the colon, and then enter a space

(4) Input Box-shadow: Repeat steps (2) and step (3).

7. Apply multiple shadows to an element:

(1) Input-webkit-box-shadow:

(2) Enter values that represent-offset, Y-offset, Blur-radius, spread, and color, respectively

(3) Enter a comma,

(4) Repeat step (2) for each attribute using a different value

(5) Input Box-shadow: Repeat step (2) to step (4)

8. Change the Box-shadow back to the default value:

(1) Input-webkit-box-shadow:none

(2) Input Box-shadow:none

9. Apply Multiple backgrounds:

(1) Input background-color:b The b here is the alternate background color that you want to apply to the element

(2) Enter Background-image:u here is a list of URLs (separated by commas) for absolute or relative path image references

(3) Input background-position:p here p is paired x-offset and Y-offset

(4) Input background-repeat:r here R is repeat, Repeat-y, or no-repeat value

10. Use the gradient background:

There are two main ways to create gradients using CSS: linear and radial gradients.

Create Alternate background color: Enter Background:color The color here can be hexadecimal number, RGB value.

To define a linear gradient:

(1) Input background:linear-gradient (

(2) If you want the gradient direction to be from top to bottom, skip this step

The input direction is followed by a comma, where the direction refers to the value of to top, to-right, to-left, to-bottom right, tobottomleft, to-top right, or to-top left.

(3) Define the color of the gradient according to the "Specify color" or "stop position of the specified color and color" later

(4) input); Complete the gradient

To define a radial gradient:

(1) Input background:radial-gradient (

(2) Specifies the shape of the gradient. Skip this step if you want the shape of the gradient to be determined by the size specified in the next step. Otherwise enter circle or Ellispse

(3) Specifies the size of the gradient. If you want the dimension of the gradient to be the automatically specified value (the default is Farthest-corner, the furthest angle), skip this step. Enter size, where size can be a length value representing both the width and height of the gradient, or a pair of values representing the width and height. Note: If you use only one value, this value cannot be a percentage. Enter size, where the size is Closest-side, farthest-side, Closest-corner, or Farthest-corner.

(4) Specifies the position of the gradient. If you want the gradient to start from the center of the element, skip this step. Enter the POS, where the POS is at the top, at the right, at the left, the Atbottom, at the bottom left, the at top, the at top, and so on.

(5) If you have specified step (2) to step (4), enter a comma.

(6) Define the color of the gradient according to the "Specify color" or "stop position of the specified color and color" later.

(7) input); Complete the gradient.

11. Set the opacity for the element:

Use the Opacity property to modify the opacity of an element. Ways to modify Element opacity: Enter Opacity:o here to indicate the opacity of the element (0.00 full Transparent ~1.00 Two-bit decimals between completely opaque, without units)

12. Effect of content generation:

: Before and: After pseudo-elements can be used in conjunction with the content property to generate the contents, which refers to content created through CSS rather than HTML-generated.

13. Flatten the image with a sprite:

Browsers often display text quickly, but images tend to slow the loading of pages. To solve this problem, you can combine multiple images into a single background image and then control the part of the image through CSS.

14th: Using CSS3 for enhancement