HTML5 + CSS3 and html5css3

HTML5 + CSS3 and html5css3

Let's talk about it first:I am a cainiao, or a new year that has just entered the front-end field. I am constantly improving, understanding the code most deeply, and I do not know how to understand it.

Abbreviation of background attribute:

Combination of background-position attributes: [left | center | right] | [top | bottom] (the codes in the combination are separated by spaces)

The background-attachment attribute sets whether the background image is fixed or scrolled along the rest of the page.

The abbreviated order of background attributes is as follows: background-color | background-image | background-repeat | background-attachment | background-position (in general, the background color and background image are not used together., it is rarely used together, but it is used when the background image is transparent)

Rounded corner Frame: Border-radius and border-image of css3

Border-radius: Top, right, bottom, left (four attribute values)

Border-image: url (), cropping location, repetition

Eg: border-image: url (), 25% 25% 25% 25%/25px round; (horizontal and vertical border width)

Shadow:Box-shadow

Box-shadow: 3px (horizontal shadow position) 3px (vertical shadow position) 6px (shadow width) #666 (color );

Opacity:

Rgba also sets the color and opacity.

Font-family: 'Open Sans ', Helvetica, Arial, sans-serif; line-height: 23.8px; ">

The last displayed transparency is 80%.

Opacity

This attribute value can also achieve transparent results, but it is not implemented in the background but in the foreground.

0 between 0 and 1 of the attribute values is transparent. 1 is not transparent.

Summary

When we hit the code, we can't just look at the implementation effect, but also think about the code elegantly. Although we are in the house, we still need to stay elegant. It is necessary to be an elegant front-end developer.