1.【border】 border (takes up space when layout)

[border] Sets the border

    border: Border width (PX) Border type Border color;Copy the code

Border direction

【border-topUpper borderborder-right] Right border [border-leftLeft borderborder-bottom】 the borderCopy the code

Border-width: 0px; border-width: 0px; border-width: 0px;

One to four values can be set (for top, right, bottom, and left borders) :

Thin defines a thin border. [medium] default. Define a medium border. 【thick】 defines a thick border.Copy the code

Unified setting format:

border-width: upper right lower left;border-width: up, down, left and right;Copy the code

Border-style:

Parameter values:

【solid】 solid line 【dotted】 line 【groove】 definition3D Groove border. The effect depends onborder-colorValue (cubic box, such as sink) [Ridge] definition3D ridge border. The effect depends onborder-colorValue (hollow ladder) [inset] definition3D inset border. The effect depends onborder-colorValue [outset] definition of outset [outset3D outset frames The effect depends onborder-colorValue (outer border, such as house wall) [none【hidden】 Defines a hidden borderCopy the code

You can also set the styles in each direction: (still follow: up, right, down, left)

border-style: dotted solid double dashed;
Copy the code
  • The top border is dotted
  • The right border is solid
  • The bottom border is double line
  • The left border is dotted

If the border-style property is set to three values: (still follow: up, left, right, down)

border-style: dotted solid double;
Copy the code
  • The top border is dotted
  • The right and left borders are solid lines
  • The bottom border is double line

If the border-style property is set to two values: (still follow: up, down, left and right)

border-style: dotted solid;
Copy the code
  • The top and bottom borders are dotted
  • The right and left borders are solid lines

If the border-style property is set to a value: (still follow: all the same, default)

border-style: dotted;
Copy the code
  • All four edges are dotted

Border color (border-color)

One to four values can be set (for top, right, bottom, and left borders).

For example, border-color: red green yellow pink;

Rounded border (border-radius)

Parameter values:

【px】 Shape with rounded corners. 【%】 Defines the rounded corner shape as a percentage.Copy the code

Setting Mode:

  • One value: All corners have the same value

  • Two values: the first value is upper left and lower right, and the second value is upper right and lower left

(Cross memory: top left, right, bottom right, top left, bottom left)

  • Three values: the first value is the upper-left corner, the second value is the upper-right and lower-left corner, and the third value is the lower-right corner

(Z shape: left upper right upper left lower right)

  • Four values: the first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.

(Clockwise: upper left, right, upper right, lower left, lower left)

You can also set the radian of the corner separately

Top left radian: [border-top-left-radius]

Top right radian: [border-top-right-radius]

[border-bottom-left-radius] [border-bottom-left-radius]

【border-bottom-right-radius】

2.【outline】

Note:outlinewithFrame is different!

The differenceIs this:The outline is outside the border of the elementDrawn, andMay overlap with other content. In the same way,The outline is not the element sizeA part of;The total width of the elementandhighlyIs not affected byContour widthThe influence of.

【outline】 Set the outline

A contour is a line drawn around an element, outside the border, to highlight the element.

    outline: Outline width (PX) Outline type Outline color;Copy the code

Outline width (outline-width) :[Same as border, can also be set to px]

【thin】 usually1px. 【medium】 Usually3px. 【thick】 usually5px.Copy the code

Outline type (outline-style):[same as border]

Parameter values:

【solid】 solid line 【dotted】 line 【groove】 definition3D Groove border. The effect depends onborder-colorValue (cubic box, such as sink) [Ridge] definition3D ridge border. The effect depends onborder-colorValue (hollow ladder) [inset] definition3D inset border. The effect depends onborder-colorValue [outset] definition of outset [outset3D outset frames The effect depends onborder-colorValue (outer border, such as house wall) [none【hidden】 Defines a hidden borderCopy the code

Outline color :[same as the border]

Invert Invert color

Color inversion. This ensures that the outline is visible regardless of the color background, right

    outline-color: invert;
Copy the code