Home >Web Front-end >HTML Tutorial >CSS borders and borders_html/css_WEB-ITnose
CSS borders and borders_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:55:132027browse
CSS borders and borders
1. CSS border properties
The CSS border properties allow you to specify an element The style and color of the border.
1.1. Border style
The border style attribute specifies what kind of border to display.
border-style attribute is used to define the style of the border
1.2. Border width
You can specify the width for the border through the border-width attribute.
There are two ways to specify the width of the border: you can specify a length value, such as 2px or 0.1em; or use one of 3 keywords, which are thin, medium (default) and thick.
Note: CSS does not define the specific width of the 3 keywords, so one user agent may set thin, medium, and thick to equal 5px, 3px, and 2px respectively, while another user agent sets them to 3px respectively. , 2px and 1px.
1.3. Border color
The border-color property is used to set the color of the border. Colors that can be set:
name - specify the name of the color, such as "red"
RGB - specify the RGB value, such as "rgb(255,0,0)"
Hex - specify the 16 hexadecimal Control value, such as "#ff0000"
You can also set the border color to "transparent".
Note: border-color does not work when used alone. Border-style must be used to set the border style first.
1.4. Border - shorthand attribute
The above example uses many attributes to set the border.
You can set it in the "border" attribute:
border-width
border-style (required)
border-color
2 , CSS Padding (inner border)
The CSS Padding (filling) property defines the space between the element border and the element content.
When an element's Padding (padding) is cleared, the "released" area will be filled with the element's background color.
Use the padding attribute alone to change the top, bottom, left, and right padding. The abbreviation fill attribute can also be used, once changed everything changes.
3. CSS Margin (margin)
The CSS Margin (margin) property defines the space around the element.
Margin clears the area around the element (outer border). Margin has no background color and is completely transparent
margin can change the top, bottom, left and right margins of the element independently. It is also possible to change all properties at once.
<!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边框与边界"/><meta name="description" content="CSS边框与边界"/><meta name="author" content="xiaobei QQ:2801616735"/><title>CSS边框与边界</title></head><body> <ul> <li>边框</li> <li>内边界</li> <li>外边界</li> </ul> <h2>1、边框border</h2> <p style="border-color:red; border-style:dashed; border-width:1px;">border-style<br/>border-color<br/>border-width</p> <hr/> <h2>2、边框方向设置</h2> <p style="border-style:dashed; border-color:red green blue orange; height:50px;"> border-color:red green blue orange; </p> <hr/> <h2>2.1、边框方向设置</h2> <p style="border-style:dashed; border-color:red green; height:50px;"> border-color:red green; </p> <hr/> <h2>2.2、边框方向设置</h2> <p style="border-style:dashed; border-color:red green blue; height:50px;"> border-color:red green blue; </p> <hr/> <h2>3、内边界</h2> <table bgcolor="#FF0000" border="0" width="200" height="150" cellpadding="0" cellspacing="0"> <tr><td valign="top" style="padding-top:20px; padding-left:20px;">内边界</td></tr> </table> <hr/> <h2>4、外边界</h2> <table bgcolor="#FF0000" border="0" width="200" height="150" cellpadding="0" cellspacing="0"> <tr><td valign="top" style="margin-top:20px; margin-left:20px;">内边界</td></tr> </table></body></html>