Understanding CSS borders and css borders

Understanding CSS borders and css borders
Contents [1] basic style border Width border color [2] Order of Values [3] CSS3 style border-colors border-radius box-shadow border-image [4] Note basic style border

A border is a set of styles separated by spaces, including border width (Border width), border color, and border style. The order is irrelevant.

border: border-width border-color border-styleborder: 1px solid red;

 

Border Style

If a border has no style, the border will not exist at all.

Border-style: none (default) border-style: hidden/dotted/dashed/solid/double/groove/ridge/inset/outset (9 in total)

 

Border Width

The Border width cannot be negative or a percentage value.

Border-width: thin/medium (default)/thick/<length>

 

Border color

The default border color is the foreground color of the element. However, if only border-style is set and border is not set in the table, the border color is black, not the same as the text color.

border-color: transparent/<color>

<Demo Box> click the following attribute values for demonstration.

 

Single border

border-top/border-right/border-bottom/border-left

 

12 Border styles

border-width:    border-top-width    border-right-width    border-bottom-width    border-left-widthborder-style:    border-top-style    border-right-style    border-bottom-style    border-left-styleborder-color：    border-top-color    border-right-color    border-bottom-color    border-left-color

 

Key Value Order

Border-width: 1px 2px 3px 4px; // top right bottom left border-width: 1px 2px 3px; // top (left) Bottom border-width: 1px 2px; // (up/down) (left) border-width: 1px; // (up/down)

 

CSS3 style multi-color border-colors

border-colors:<color><color>……

border: 10px solid black;-moz-border-top-colors: red green;-moz-border-right-colors: green yellow;-moz-border-bottom-colors: yellow blue;-moz-border-left-colors: blue red;    

[Note] It is only supported by firefox and must be prefixed with-moz-. Only four sides can be written separately; otherwise, it is invalid.

 

Border-radius (IE8-not supported)

Border-radius: none (default) border-radius: <length >{1, 4} [/<length >{1, 4}]? // If a backslash exists, the preceding value is the horizontal radius, and the following value is the vertical radius. If not, the horizontal and vertical directions are equal.

The order of values is top left, top right, bottom right, and bottom left.

[NOTE 1] <length> can be a specific value or a percentage, but not a negative number.

[NOTE 2] resetting border-radius without rounded corners is invalid if none is used. The value must be 0.

[NOTE 3] border-radius has no effect on

[Single rounded corner]

border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radiusborder-top-left-radius: 10px 20px;

[Note] the rounded corner cannot be added when the single corner is written/

[Order of values]

The order of values is top left, top right, bottom right, and bottom left.

border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;

Diameter and outer diameter]

Border-radius diameter = outer diameter-border Width

When the border-radius value is less than or equal to the border width, the element has no inner diameter.

[Special graphics]

Circle

The width and height of the element are the same, and the radius of the rounded corner is half the width and height.

div{    width: 100px;    height: 100px;    border-radius: 50%;}

Halfcircle

The element width and height are different, and the radius and width of the rounded corner must match

div{    width: 100px;    height: 50px;    border-radius: 50px 50px 0 0;}

Slice

　The element width and height are the same as the radius of a rounded corner.

div{    width: 50px;    height: 50px;    border-radius: 50px 0 0 0;}    

Elliptic

The element width and height are different, and the horizontal and vertical radius correspond to the width and height respectively.

div{    width: 120px;    height: 80px;    border-radius: 120px/80px;}    

 

Box shadow

Box-shadow: none (default) box-shadow: (h-shadow v-shadow blur spread color inset) +;

H-shadow: horizontal shadow position (required) v-shadow: vertical shadow position (required) blur: fuzzy distance (optional) spread: shadow size (optional) color: shadow color, the default color is the same as the text color (optional) inset: Internal shadow (optional)

box-shadow:10px 10px red,20px 20px blue;

[NOTE 1] Multiple shadows can be used, but too many shadows may cause poor performance.

[NOTE 2] Top Of The inside shadow of the border, top of the background image, top of the background color, and top of the background color.

[NOTE 3] The Inner Shadow has no effect on the element.

[NOTE 4] The Shadow written first is at the top layer.

Simulate border]

box-shadow: 0 0 0 10px blue;

<Demo Box> click the following attribute values for demonstration.

 

Image border-image (IE10-not supported)

Border-image: none (default) border-image: border-image-source | border-image-slice [/border-image-width? |/Border-image-outset]? | Border-image-repeat;

[Note] This attribute is used to replace border-style. If border-image is set to none, the value of border-style is displayed.

border-image: url('img.img') 27 fill / 27 / 27px repeat;

[Border-image-source]

　Border image path

border-image-source:url('test.img');

[Border-image-slice]

Position of four cutting lines on the border

border-image-slice:  <number> | <percentage> fill

[Note 0] No write unit. The default unit is px.

[NOTE 1] fill indicates that the middle part of the image border will be retained

[NOTE 2] The direction of the four values is the top right bottom left, which indicates the direction of the cutting line. The cutting lines are respectively high width and high width.

[NOTE 3] The image border is displayed within the border range. If the Border width is not equal to the slice segment value, the image border is scaled up and down proportionally, so that the image border is displayed within the border range.

[NOTE 4] If the slice value is negative, or the width or height greater than the box is 100%, the entire background image is displayed in four corners.

[Note 5] If the right cut and left cut are greater than the width of the box, the upper and lower middle are divided into null. If the upper cut and lower cut are greater than the height of the box, the left and right middle are divided into null.

[Border-image-width]

Border Width

border-image-width: <length> | <percentage> | <number> | auto  

[NOTE 1] If this parameter is set, the border image width is determined by this parameter; otherwise, the Border width of the box is determined.

[NOTE 2] It can be represented by specific pixels, numbers (expressed by several times), and percentages.

[NOTE 3] follow the order of four values

[Border-image-outset]

The number of border image areas that exceed the border

Border-image-outset: 0 (default) border-image-outset: <length >|< number>

[NOTE 1] It can be represented by specific pixels and numbers (several times ).

[NOTE 2] follow the order of four values

[Border-image-repeat]

Border image Arrangement

Border-image-repeat: stretch (stretch, default) | repeat (repeated) | round (tiled) [1, 2] // the first value indicates the horizontal arrangement, the second value indicates the vertical arrangement.

[NOTE 1] repeat is a tiled border between the two ends, which may cause the edges to be split.

[NOTE 2] round scales the slice of the border background image so that it is displayed exactly

Button implementation]

div{    display: inline-block;    border-image: url('button.png') 16 fill/ auto / 5px;}

Notes

[1] borders are drawn on the element background (with compatibility issues)

[2] The border intersection of the same element is a diagonal line.

[3] triangles can be implemented using borders.

[4] The upper and lower borders of the row elements do not affect the layout because they do not affect the Row Height. The left and right borders affect the layout.