CSS3 border

1. Box border

1. Box rounded corners: border-radius: pixels or percentages

2. Box shadow: box-shadow

Attributes: X-axis offset, Y-axis cheapness, unreal degree of color, color of shadow, position of shadow (shadow is outside by default, inset is set inside)

(The offset can be negative, left negative and right positive, top negative and bottom positive)

# a1 {
            width: 100px;
            height: 100px;
            border: 1px solid #0000FF;
            background - image: url(QQ picture 20180506095022.png);
            background-repeat: no-repeat;
            background-position: 20px 20px ;
            border-radius: 50%;}

Two, background

1. Introduce: background-image:url()

2. Size: size: 100% 100%

3. Tile: repeat: no-repeat

4. Position: origin: content-box border-box padding-box position: top right left bottom (how much from the left, how many 7 from the top)

3. Fonts

1. The shadow of the font: text-shadow: the blurriness of the shadow on the x-axis, the y-axis, and the shadow color

2. Font overflow display over-flow: hidden white-space: nowap;

3. Newline of English fonts

①, word-break:break-all For example, the width of div is 200px, and
　　its content will automatically wrap at 200px.
　　If there is a long English word at the end of the line (congratulation, etc.),
　　it will truncate the word and become the end of the line For conra (the front-end part of congratulation),
　　the next line is the back-end part of regulation (conguatulation).

②. The example of word-wrap:break-word is the same as above,
         but the difference is that it will congratulate the whole word as a whole.
         If the width of the end of the line is not enough to display the whole word,
         it will automatically put the whole word on the next line,
         and Words are not truncated.

#a2{
            width: 200px;
            height: 50px;
            border: 1px solid chartreuse;
            word-break: break-word;
            
        }

4. Transparency

1. opcity: 0~1, the smaller the more transparent

2、background-color，rgba（）：

Five, gradient color

1. background-image: linear-gradient (pointing direction, color 1, color 2, color 3):

# a3 {
            width: 200px;
            height: 100px;
            border: 1px solid #7FFF00;
            color: black;
            background-image: linear-gradient(to top,blue,yellow,red);
            
        }

6. Pictures

1、img：src

2. Move the mouse up to display (annotation)

3. The rounded corners of the picture: border-radius

4. The shadow of the picture: box-shadow

5. The filter of the picture: filter

Guess you like