CSS border and border, CSS Border border
CSS border and border
1. CSS border attributes
The CSS border attribute allows you to specify the style and color of an element border.
1.1. Border Style
Border style attribute specifies the border to be displayed.
The border-style attribute defines the border style.
1.2. Border Width
You can use the border-width attribute to specify the border width.
You can specify the width of a border by specifying the length value, such as 2px or 0.1em, or using one of the three keywords, which are thin, medium (default), and thick.
Note: CSS does not define the specific width of three keywords. Therefore, a user agent may set thin, medium, and thick to 5px, 3px, and 2px respectively, the other user agent is set to 3px, 2px, and 1px respectively.
1.3 border color
The border-color attribute is used to set the border color. Configurable colors:
Name-specifies the color name, such as "red"
RGB-specify the RGB value, for example, "rgb (, 0 )"
Hex-specify the hexadecimal value, for example, "# ff0000"
You can also set the border color to "transparent ".
Note: border-color alone does not work. You must first use border-style to set the border style.
1.4 Border-short attribute
The preceding example uses many attributes to set borders.
You can set it in the "border" attribute:
Border-width
Border-style (required)
Border-color
2. CSS Padding (inner boundary)
The CSS Padding attribute defines the space between the element border and the element content.
When the Padding of an element is cleared, the "released" area is filled with the background color of the element.
You can use the fill attribute to change the padding between top, bottom, and left. The abbreviated fill attribute can also be used. Once changed, everything changes.
3. CSS Margin (Margin)
The CSS Margin (Margin) attribute defines the space around the element.
Margin clears the area of the surrounding elements (outer border. Margin has no background color and is completely transparent.
Margin can independently change the upper, lower, left, and right margin of an element. You can also change all attributes at a time.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <meta name =" keywords "content =" CSS border and border "/> <meta name =" description "content =" CSS border and border "/> <meta name = "author" content = "xiaobei QQ: 2801616735 "/> <title> CSS border and border </title>
What is the difference between border and border in css?If you think of this button as a box and the words on the button as items in the box, then:
A Boundary (margin) is the distance between a box and the outside world. For example, the distance from another box is also called the outer margin.
Padding is the distance between items in a box and the padding.
A border is a side of a box and is part of a box.
Css check box unboundaryI think what you want is to change the color of the border line. I have done it. It is compatible with IE6 7 8 Firefox;
Direct use of border involves a lot of problems, such as the "color changed but there is a boundary in the middle" and incompatibility. So let's take the following example to see if you want the effect.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Style type = "text/css">
Body, div, input {margin: 0; padding: 0}
. CheBor {float: left; margin: 0 3px; border: # FF0000 1px solid; width: 11px; height: 11px; overflow: hidden}
. CheBor1 {margin:-1px; * margin:-5px}
</Style>
</Head>
<Body>
<Div class = "cheBor"> <input name = "" type = "checkbox" value = "" class = "cheBor1"/> </div>
<Div class = "cheBor"> <input name = "" type = "checkbox" value = "" class = "cheBor1"/> </div>
<Div class = "cheBor"> <input name = "" type = "checkbox" value = "" class = "cheBor1"/> </div>
<Div class = "cheBor"> <input name = "" type = "c... full text>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
