CSS border series and cssborder Series

CSS border series and cssborder Series

1. border

Border attributes include border-width, border-style, and border-color.

Border-color is the foreground color of the element content by default. border-width is the keyword medium by default, but border-style is none by default. Therefore, if border-style is not specified, the border will not exist.

 

AboutBorder-color

Transparent, which is said to have a miraculous effect in specific circumstances, needs to know that there is such an optional value.

White, the white dotted border, sometimes has a miraculous effect.

For example:

More specifically, it should be the dotted/dashed border with the same color as the background color of the parent element.

 

8 TypesBorder-style:

(You can use it properly only when you remember it .)

 

AboutMixed border

With CSS cascade, we can even set different widths, styles, and colors for the borders in four directions, depending on the specific situation.

 

2. border-radius

Syntax Rules:

Border-radius: a B c d; Order: top left, top right, bottom right, bottom left. (Clockwise)

Border-radius: a B c d/a B c d; the first group is a horizontal value, and the second group is a vertical value.

Border-top-left-radius: a B; set up a single rounded corner.

(When defining a single rounded corner, you must first go up and down, then left and right, otherwise it will not work .)

 

Note:

The effect of the rounded corner is not based on the existence of the border. That is to say, the rounded corner can be set even if there is no border.

 

Small tips: border-radius: 50%

 

3. border-image

Unlike border-radius, border-image is based on the existence of border. Its essence is to replace border-style with image.

Syntax Rules:

Border-image-source

Supports both none and url options. (if it is none, you don't need to look at it below ...)

Border-image-slice

Specify the tangent of the nine squares in the order of top, right, bottom, and left. Only numbers and percentages are supported.

(The unit of px is included in the pure number, and the percentage is calculated based on the width and height of the image .)

(Optional) fill. By default, the ninth area is not displayed. fill is specified for display. It is specified in border-image-slice.

Border-image-width

Specify border-image-width in the order of top, right, bottom, and left to overwrite border-width. Optional.

It is tested that when the border-image-width is greater than the border-width, it will expand inward (the line outside will not change, and the width will be increased to the inside), but it is just an example of it, nothing except that it has changed itself; it will intrude into the padding area or even the content area.

When border-image-width is smaller than border-width, it will contract outward (the line outside will not change, and the line inside will contract outward), leaving gaps with the padding area or content area.

It can be 0, that is, the border-image does not exist, but cannot be a negative value.

(I suggest you just look at this property so that it is equal to the Border Width by default .)

Border-image-outset

Specify the image's outward distance in the order of top, right, bottom, and left. Optional. pixel distance and pure number are supported.

Pixel distance is easy to understand. 20 PX means moving 20 PX; pure number refers to a multiple of border-width. (Note: It is border-width, which is not related to border-image-width .)

Note that the word "move" is used here, rather than "extension.

Border-image-repeat

In the order of top, right, bottom, and left, specify how to fill the border blank; accept two values, one horizontal direction and one vertical direction.

The default value is stretch (stretch). repeat and round are optional ).

 

Here is just a Summary of the usage of these attributes, and I have not explained the meaning and mechanism of the attributes.

For details about these five attributes, we recommend an article, css3: detailed explanation of the border-image border image, which is well written and very careful. I have understood it so much.

 

Outline

Outline-width, outline-style, and outline-color have the same syntax and performance as border, but do not occupy any document space.

Outline-offset, which defines the distance between outline and border (padding and content area) and has no relationship with margin.

 

Iv. box-shadow

Syntax Rules:

H-shadow (required, the position of the horizontal shadow, which can be negative );

V-shadow (required, vertical shadow position, negative );

Blur (optional, fuzzy distance );

Spread (optional, shadow size );

Color (optional, shadow color );

Outset (default)/inset (optional. Change the external shadow to the internal shadow ).

 

Box-shadow Application

CSS:

1 .container {2     width:200px;3     height:100px;4     background-color: #ccc;5     border:10px solid red;6     border-radius: 10px;7     box-shadow: 0 0 0 10px green; 8 }

Effect:

1 <! DOCTYPE html> 2