css border-bottom-style

时间:2023-04-22 14:50:50

border-bottom-style是CSS属性之一,用于设置HTML元素底部边框的样式。这个属性可以接受以下值:

none:无边框
hidden:边框被隐藏
dotted:点状边框
dashed:虚线边框
solid:实线边框
double:双线边框
groove:3D凹槽边框
ridge:3D脊边框
inset:3D嵌入边框
outset:3D突出边框
语法格式如下:

border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
以下是一个使用border-bottom-style的示例:

<!DOCTYPE html>
<html>
<head>
<style>
/* 设置底部实线边框 */
div {
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 5px;
padding: 10px;
}
</style>
</head>
<body>

<div>
<h1>Border Bottom Style Example</h1>
<p>This is a paragraph with a solid bottom border</p>
</div>

</body>
</html>

在上面的示例中,div元素的底部边框被设置为实线边框,并带有红色颜色和5像素的宽度。此外,元素还设置了10像素的内边距。

相关词 border