css border-bottom属性设置下边框样式

时间:2016-07-15
css border-bottom属性用于设置html元素的下边框样式,下边框样式包括border-bottom-width、border-bottom-style、border-bottom-color三个属性,本文章向大家介绍css border-bottom属性的使用方法和使用实例,需要的朋友可以参考一下。

border-bottom介绍

border-bottom缩写属性设置一个声明中所有底部边框属性。

可以设置的属性分别(按顺序):

  1. border-bottom-width 设置下边框宽度
  2. border-bottom-style 设置下边框样式
  3. border-bottom-color 设置下边框颜色

比如:

border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:red;

可以简写为:

border-bottom:1px solid red;

注意:如果border-bottom-style设置为none,即使设置了下边框的颜色和宽度,这两个属性也不会生效

border-bottom实例

css设置下边框样式

<!DOCTYPE html>
<html>
<head>
<title>http://www.manongjc.com/article/1190.html</title>
<style>
p {
    border-style:solid;
    border-bottom:thick dotted #ff0000;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>

在线运行