referring to the border, the first thing you think of is the CSS boder
property. Yes, border
attributes are one of the underlying properties of the CSS seed box model. In CSS3, what is the difference between the use of borders? And how will it be used? In this chapter we begin our CSS3 border tour with these questions.
3.1 CSS3 Frame Introduction
border
Attributes are already defined in CSS1 and can be used to set the border style of an element.
3.1.1 Basic properties of a border
The border properties in CSS1 and CSS2 are really simple and consist of three types of values.
border-width
: Sets the thickness of the element's border.
border-color
: Sets the color of the element's border.
border-style
: Sets the type of the element border.
In practice, the above three attributes can be combined together with the following abbreviated syntax:
border: border-width border-style border-color;
Each attribute is separated by a space after the abbreviation, and there is no order between them, but the only value that is required here is "" in three values border-style
.
3.1.2 Type of border
| Property values | Function Description | Sample Code | |---|---|---| |none
| Define No Border |.ele{border:none;}
| |hidden
| andnone
"Is the same, except when applied to a table,hidden
Used to resolve Border conflicts |.ele{border:hidden;}
| |dotted
| Defining a Point Border |.ele{border: 3px dotted red;}
| |dashed
| Define a dashed border |.ele{border: 3px dashed red;}
| |solid
| Define a solid border |.ele{border: 3px solid red;}
| |double
| Define two lines. The width of the double line equalsborder-width
Value of |.ele{border: 3px double red;}
| |groove
| Defines a 3D groove border, and its effect depends onborder-color
Value of |.ele{border: 3px groove red;}
| |ridge
| Defines a 3D ridge border, and its effect depends onborder-color
Value of |.ele{border: 3px ridge red;}
| |inset
| Definition 3Dinset
Border, the effect depends on theborder-color
Value of |.ele{border: 3px inset red;}
| |outset
| Definition 3Doutset
Border, the effect depends on theborder-color
Value of |.ele{border: 3px outset red;}
| |inherit
| Specifies that the border style should be inherited from the parent element. Some browsers do not support this property value |.ele{border: 3px inherit red;}
|
Chrome
360 Secure Browser Haste mode
360 Secure Browser compatibility mode
Firefox
IE11
IE10
IE9
IE8
IE7
None of the above IE78910 uses the native IE test, but instead uses the test IE11 's own IE78910.
Graphical css3--3rd CSS3 border-1 "