Detailed explanation of CSS background and border tag examples

1. CSS background tag

1. Set the background color

The background-ground-color property specifies the background color of an element.
A small example is shown below:

The results are as follows:

You can use selectors to set different colors for different tags. Here, the h1, div, and p tags will have different background colors:
Examples:

The running results are shown in the figure below:

2. Set the background image

The background-image property specifies an image to use as the background of an element. By default, the image repeats to cover the entire element. Use URL to import external images.
The specific examples are as follows:

The running results are as follows:

Note: When using background images, pay attention to the style of the background image and avoid images that interfere with the text, so as not to affect the effect.

Problem with css background-repeat By default, the background-repeat property repeats the image both vertically and horizontally. Some images should only be repeated horizontally or vertically. If you want to repeat only horizontally, you need to use (background-repeat: repeat-x;), then the background will look better. If you want to repeat the image only vertically, you need to set background-repeat: repeat-y.
The attribute can also be specified to display the background image only once: use the background-repeat: no-repeat tag.

4. Specify the location of the background image

To specify the position of the background image, you need to use the background-position tag. The specific example is shown in the figure below:
The following code will show the background image placed in the upper right corner:

The running results are shown in the figure below:

5. Set the background image to be fixed

The background-attachment property is used to set the background image to be fixed. The property value scroll means the image scrolls with the page elements (the default value), and fixed means the image is fixed on the screen and does not scroll with the page elements.

6. Set the background image size

The background-size property can set the height and width of the background image. The first value sets the width and the second sets the height. If you set a value, the second value will default to auto. Its format is as follows:
background-size: property 1 property 2;
The following are examples:

The results are as follows:

7. Set image transparency effect

The opacity attribute can be used to make any element transparent. The transparency is between 0 and 1. The format is as follows:
opacity: opacityValue;

2. CSS border tag

1. Set the border color

(1) Set the border style (border-style)
Border style is used to define the style of the border. Common property values ​​are as follows:
none: No border, ignoring all border widths (default).
solid: The border is a single solid line.
dashed: The border is a dashed line.
dotted: The border is dotted.
double: The border is a double solid line.
You can set the style of a single side of the box, or you can set the style of all four sides comprehensively. When using the border-style property to comprehensively set the style of the four sides, you must follow the clockwise order of top, right, bottom, and left. When omitted, the principle of value duplication is used, that is, one value is four sides; two values ​​are top, bottom, left, and right; three values ​​are top, left, right, and bottom.
border-top-style: top border style
border-right-style: right border style.
borer-bottom-style: Bottom border style.
border-left-style: bottom border style.
border-style: top border style, right border style, bottom border style, left border style
border-style: top border style, left border style, bottom border style.
border-style: top and bottom border styles, left and right border styles.
border-style: top, bottom, left, and right border styles.
(2) Set border width (border-width)
The border-width property is used to set the width of the border. Its format is as follows
border-width: top [right bottom left];
In the above syntax format, the border-with property is usually expressed in pixels (px). And also following the principle of value replication, its attribute values ​​can be set to 1 to 4, that is, one value is the four sides, two values ​​are up/down/left/right, three values ​​are up/left/right/bottom, and four values ​​are up/right/bottom/left. The details are as follows:
border-top-width: top border width
border-right-width: right border width.
borer-bottom-width: Bottom border width.
border-left-width: bottom border width.
border-width: top border width, right border width, bottom border width, left border width
border-width: top border width, left border width, and bottom border width.
border-width: upper and lower border width, left and right border width.
border-width: The width of the top, bottom, left and right borders.
(3) Set border color (border-color)
The border-color property is used to set the border color. Its format is as follows:
border-color: top [right bottom left];
When setting the border style, you must set the border style. If the style is not set or is set to none, other border properties are invalid. The single-sided and comprehensive settings of border color are in clockwise order, following the same rules as the width and style attributes above, so they will not be described here one by one.
(4) Comprehensive border settings
border-top: top border width, style and color.
border-reight: right border width style color
border-bottom: bottom border width, style and color
border-left: left border width, style and color
border: width, style, color of all four sides (5) rounded border
The border-radius property is used to add rounded borders to an element:
Its syntax format is shown below:
border-radius: parameter 1/parameter 2
"Parameter 1" represents the horizontal radius of the fillet, and "parameter 2" represents the vertical radius of the fillet. The two parameters are separated by "/". It should be noted that when using the border-raidius property, if the second parameter is omitted, it will default to the first parameter. Set the border radius via border-radius.

This is the end of this article summarizing CSS background and border tags. For more relevant CSS background and border content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!