border-bottom（指定下边线的样式、宽度及颜色）
border-bottom: 值；
border-bottom-style:值;
border-bottom-color: 值;
border-bottom-width:值;
如：
border-bottom: solid 1px #ffff00;
border-bottom-style: outset;
border-bottom-color: #0000ff;
border-bottom-width:15px;
border-bottom属性用于指定下边线的样式、宽度及颜色，值之间用半角空格间隔，没有先后顺序。
关于border-bottom属性的样式的值，具体可参照边线的样式。边线的宽度的值，具体可参照边线的宽度。
当分别指定下边线的样式、宽度、颜色时使用以下属性：
border-bottom-color:下边线的颜色
border-bottom-style:下边线的样式
border-bottom-width:下边线的宽度
| 属性 | 值 | 说明 |
|---|---|---|
| border-bottom | solid | 下边线为实线 其他的值还有：groove、dotted等，详细请参照边线样式。 |
| 1px | 下边线的宽度 使用数值可以表示边线的任意宽度，数值单位除了px，还有em、ex，详细请参照数值+单位 使用关键词指定 thin(细)、medium(普通)、thick(粗) |
|
| #ff0000 | 下边线的颜色 除了使用颜色代码表示具体颜色之外，边线还可以指定为透明即：transparent |
实例
css文件
.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;
}链接了上述css文件的html文件
<!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>
以上是css border-bottom用法详解的详细内容。更多信息请关注PHP中文网其他相关文章！
什么是CSS Flexbox？Apr 30, 2025 pm 03:20 PM文章讨论了CSS FlexBox，这是一种布局方法，用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法，将其与CSS网格进行了比较，并详细浏览了浏览器支持。
我们如何使用CSS使网站迅速响应？Apr 30, 2025 pm 03:19 PM本文讨论了使用CSS创建响应网站的技术，包括视口元标签，灵活的网格，流体媒体，媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用，并推荐CSS框架
CSS盒装属性有什么作用？Apr 30, 2025 pm 03:18 PM本文讨论了CSS盒装属性，该属性控制了元素维度的计算方式。它解释了诸如Content-Box，Border-Box和Padding-Box之类的值，以及它们对布局设计和形式对齐的影响。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
SublimeText3汉化版
中文版，非常好用
WebStorm Mac版
好用的JavaScript开发工具
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
