17th Chapter CSS Border and background [top]

Learning Essentials:

1. Declaring borders

2. Border Style

3. Rounded edges

Keynote Teacher: Li Tinghui

This chapter focuses on CSS borders and backgrounds in HTML5, and adds a richer look to the elements through the styling of borders and backgrounds.

A Declaring borders

The declaration of a border has three property settings, and the style sheet is as follows:

Property	Value	Description	CSS version
Border-width	Length value	Sets the width of the border, optionally	1
Border-style	Style name	Set the style of the border, required	1
Border-color	Color values	Set the color of the border, optional	1

These three attribute values, only border-style must be declared before a border can appear. The default values appear for the other two properties.

The simplest border, the border length default 3px, the border color is black

{    border-style: solid;}

Configure a full border

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

If the element length and height are both 200px, the four border is 2 o'clock, and the element has a total length of 202px.

Two Border Style

There are three main styles for the border, namely, the border length value, the border color, and the line type of the border. Color is a common color code, and all other colors are valued. and the length and line type, the border has its own unique part.

The value table for the border width is as follows:

Value	Description
Length value	CSS length values: such as px, EM, etc.
Percentage	Set the percentage directly: 1, 2, 3, etc.
Thin	Use the preset width of the length name. The specific meaning of these three values is defined by the browser and grows from small to large.
Medium
Thick

In general, the border is more precise, and the total size of the element box is calculated, and the length value is much more. The style that defines the border line is the following style sheet:

Value	Description
None	No border
Dashed	Broken polyline Border
Dotted	Dot line border
Double	Two-line border
Groove	Groove Border
Inset	A border that has an inline effect on the element content
Outset	Border that causes the element content to have an outer convex effect
Ridge	Ridge Line Border
Solid	Solid line border

Solid solid line with the highest frequency

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

If you want to set a single edge in a four-edge setting, you can use the following style sheet:

Property	Description	CSS version
Border-top-width	Define 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

Set Top only

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

If the four changes are consistent, then there is no need to divide into three sentence style, directly by shorthand:

Property	Value	Description	CSS version
Border	< width > < STYLE > < colors >	Set border of four edges	1
Border-top		Set top Border only
Border-middle		Set the bottom border only
Border-left		Set left Border only
Border-right		Set the right border only

Short Form four edge setting

{    border: 10px solid red;}

Three Rounded border

CSS3 provides a very useful setting for rounded borders. This effect can be achieved using the Border-radius attribute, which is as follows:

Property	Value	Description	CSS version
Border-radius	Length Value or Percentage	Four-way Corner	3
Border-top-left-radius	Length Value or Percentage	Top left corner	3
Border-top-right-radius	Length Value or Percentage	upper right corner	3

Border-middle-left-radius	Length Value or Percentage	Bottom left corner	3
Border-middle-right-radius	Length Value or Percentage	Lower right corner	3

Set rounded rectangles

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

Four edges set separately

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

17th Chapter CSS Border and background [top]