Home > Article > Web Front-end > Detailed explanation of css border-bottom usage
Detailed explanation of css border-bottom usage
- 巴扎黑Original
- 2017-06-28 14:12:027804browse
border-bottom (Specify the style, width and color of the bottom line)
border-bottom: value;
border-bottom-style: value;
border-bottom-color: value;
border-bottom-width: value;
Such as:
border-bottom: solid 1px #ffff00;
border-bottom-style: outset;
border-bottom-color: #0000ff;
border-bottom-width:15px;
border-bottomAttribute is used to specify the style, width and color of the bottom border. The values are separated by half-width spaces and there is no order.
Regarding the value of the style of the border-bottom attribute, please refer to the style of the edge for details. The value of the width of the edge. For details, please refer to the width of the edge.
Use the following attributes when specifying the style, width, and color of the bottom border respectively:
border-bottom-color: The color of the bottom border
border-bottom-style: The style of the bottom line
border-bottom-width: Bottom The width of the border
| Attribute | Value | Instructions |
|---|---|---|
| border-bottom | solid | The lower border is solid Line Other values include: groove, dotted, etc. Please refer to the edge style for details. |
| 1px | The width of the lower border Use numerical values to represent any width of the border. In addition to px, the numerical units include em, ex, please refer to the value + unit for details Use keywords to specify thin (fine), medium (normal), thick (coarse) |
|
| #ff0000 | The color of the lower edge In addition to using color codes to indicate specific colors, the edge can also be specified as transparent, that is: transparent |
Example
css file
##
.sample1,.sample2,.sample3{
margin:0.5em;
padding:2px;
}
.sample1 {border-bottom: solid 1px #ffff00;}
.sample2 {border-bottom: groove 10px #00ff00;}
.sample3 {border-bottom-style: ridge;
border-bottom-color: #0000ff;
border-bottom-width:15px;
}HTML file that links the above css file
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1"> <link href="material/border-bottom.css" rel="stylesheet" type="text/css" /> <title>border-bottom属性（http://wwww.manongjc.com）</title> </head> <body> <p class="sample1">sample1：下边线 solid 1px #ffff00</p> <p class="sample2">sample2：下边线 groove 10px #00ff00</p> <p class="sample3">sample3：分别指定下边线的样式、宽度、颜色 </p> </body> </html>
The above is the detailed content of Detailed explanation of css border-bottom usage. For more information, please follow other related articles on the PHP Chinese website!