Chapter 4 CSS border and background [Top]-original of water

Chapter 4 CSS border and background [Top]-original learning points of water:

1. Declare border

2. Border Style

3. rounded border

Lecturer: Li Yanhui

This chapter mainly discusses CSS borders and backgrounds in HTML5, and adds richer appearances to elements through border and background style settings.

I. Declare borders

The border Declaration has three attribute settings. The style sheet is as follows:

Attribute	Value	Description	CSS version
Border-width	Length Value	Set the Border width. Optional.	1
Border-style	Style name	Required to set the border style.	1
Border-color	Color value	Set the border color. Optional.	1

The border can appear only when border-style is declared. The default value is displayed for the other two attributes.

// The simplest border. The border length defaults to 3px, and the border color is black.

p {    border-style: solid;}

// Configure the complete border

p {    border-style: solid;    border-width: 2px;    border-color: red;}

If the length and height of an element are both PX and the four borders are both 2, the total length and height of the element are both 202px.

Ii. Border Style

There are three types of border styles: border length value, border color, and border line type. Color is a general color code, and all other colors take a value. While the length and line type, the border has its own unique part.

The following table lists the Border width values:

Value	Description
Length Value	CSS length values: such as px and em
Percentage	Set the percentage directly: 1, 2, 3, etc.
Thin	Use the default width of the length name. The specific meanings of these three values are defined by the browser, which increases from small to large.
Medium
Thick

In general, to make the border more accurate, you also need to calculate the total size of the element box, using a large number of length values. The style of the border line is as follows:

Value	Description
None	No border
Dashed	Broken Line border
Dotted	Dot line Border
Double	Double-line Border
Groove	Groove border
Inset	Borders that make element content embedded
Outset	Border that gives the element content a convex Effect
Ridge	Spine border
Solid	Solid border

// Solid has the highest usage frequency.

p {    border-style: solid;    border-width: 10px;    border-color: red;}

If you want to set one of the four sides separately, you can use the following style sheet:

Attribute	Description	CSS version
Border-top-width	Define the top	1
Border-top-style
Border-top-color
Border-middle-width	Define bottom	1
Border-middle-style
Border-middle-color
Border-left-width	Define left	1
Border-left-style
Border-left-color
Border-right-width	Define right	1
Border-right-style
Border-right-color

// Only set the top

p {    border-top-style: solid;    border-top-width: 10px;    border-top-color: red;}

If the four changes are the same, there is no need to write three styles. You can simply write them in short:

Attribute	Value	Description	CSS version
Border	<宽度> <样式> <颜色>	Set the border of the Four Sides	1
Border-top		Only set the upper border
Border-middle		Set only the bottom border
Border-left		Set only the left border
Border-right		Set only the right border

// Four Edges in short form

p {    border: 10px solid red;}

3. rounded border

CSS3 provides a very practical setting of the rounded border. This effect can be achieved by using the border-radius attribute. The style sheet is as follows:

Attribute	Value	Description	CSS version
Border-radius	Length value or percentage	Four Corners	3
Border-top-left-radius	Length value or percentage	Top left corner	3
Border-top-right-radius	Length value or percentage	Top right corner	3

Border-middle-left-radius	Length value or percentage	Bottom left corner	3
Border-middle-right-radius	Length value or percentage	Bottom right corner	3

// Set the rounded rectangle

p {    border: 10px solid red;    border-radius: 10px;}

// Set the four sides separately

p {    border: 10px solid red;    border-radius: 10px 20px 30px 40px;}