IT Band of Brothers HTML5 CSS3 Tutorial Secret common CSS style attributes and values 3

ed4cb39125df4e16a5a79afb1b62e3b1.jpg

 

5 Border Properties

Border element property for setting a border style, border width, border color, border may be provided along four sides, but also on the border, right border, the lower and left borders provided separately. They were introduced as follows.

 

a. Border-style property

By the border style border-style property set, bottom, left, right border style, this property is used to set a border style element, and must be used to specify the visible border. 1 to 4 can be used keyword, if four values ​​are given, they were applied on the right, and the left border of the pattern. If a value is given, it will be applied to each side. If two or three values ​​given, the value is omitted from the opposite side. May also be used separately border-top-style, border-bottom-style, border-left-style and border-right-style property to each side of a single style, they can be used to attribute values, and the interpretation results shown in Figure 1 .

db9fd9617e9b45829a43457efeecbc95.png

Border style property values ​​in FIG. 1, and effects explained in FIG.

 

Examples are as follows:

2fab769cdf5546ed8ee2d9d97ecf9706.jpg

 

b. Border Width property

Border width can be specified by setting the attribute border-width, lower, left and right borders of width, the border attribute set elements with value 1 to 4, the value is a keyword or a length, the length of a negative value is not allowed. If four values ​​are given, they were applied on the right style, and the left border. If only one value is given, it will be applied to each side. If two or three values ​​given, the value is omitted from the opposite side. This property is on the border width, the right border width, border width and slightly lower write left border width properties. May also be used separately border-top-width, border-bottom-width, border-left-width and border-right-width attribute set the width of each side separately. In addition to setting the unit length can be used, can also use medium (the default value), Thin (ratio thin medium) or Thick (coarser than medium) values. Examples are as follows:

c818de6d7aae499f92f097ebaa51fc0e.jpg

 

c. Border Color property

By the border color attribute set border-color, color, down, left, right border, can be 1 to 4 keywords. If four values ​​are given, they were applied on the right style, and the left border. If a value is given, it will be applied to each side. If two or three values ​​given, the value is omitted from the opposite side. Examples are as follows:

4393cb5cc95d4135ae161b4703551d1a.jpg

 

d. Shorthand border property

CSS property border is the border attribute of a comprehensive written fast, is to write a little element for setting a border width, style and color, it contains border-width, border-style and border-color properties. Examples are as follows:

p {border: 5px solid gray;} / * set the paragraph element frame 4 is a rectilinear frame, 5-pixel-wide gray * /

Border attribute can be set only four kinds of the border, only one border width and style. For different values ​​of a given element of the four kinds of frame, authors must use one or more attributes, as border, right border, the border, left border, border color, border width, border style, border width on right border width, the width of the bottom border or left border width.

Guess you like

Origin www.cnblogs.com/itxdl/p/11762758.html