CSS border-bottom底部边框样式属性笔记

原创 国哥笔记  2018-10-14 22:40  阅读 1,234 views 次

border-bottom属性定义及用法

在css中,border-bottom属性是使用来定义元素的底部边框属性,是所有边框属性的缩写属性,所定义的边框属性分别为:border-bottom-width、border-bottom-style、border-bottom-color。border-bottom属性的三个属性值并非要全部定义,例如border-bottom:#FF0000;也是可以的(之后需定义边框样式(border-bottom-style)才看得到效果);

border-bottom属性语法格式

css语法:border-bottom:border-bottom-width border-bottom-style border-bottom-color;

例:border-bottom:1px solid red; border-bottom:1px solid; border-bottom:1px;

JavaScript语法:object.style.borderBottom="1px solid red";

border-bottom属性值说明

 

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS border-bottom底部边框样式属性笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c,#d{border: 2px solid #000;margin-top:10px ;}
#a{border-bottom:6px;border-bottom-style:solid;}
#b{border-bottom:5px dotted;}
#c{border-bottom:5px dotted red;}
#d{border-bottom:dotted red 5px;}
</style>
</head>
<body>
<div id = "a">border-bottom:6px;border-bottom-style:solid;</div>
<!--
在以上情况下,border-bottom-style必须在border-bottom之后定义,不然会被忽略,看不出效果
-->
<div id = "b">border-bottom:5px dotted;</div>
<div id = "c">border-bottom:5px dotted red;</div>
<div id = "d">border-bottom:dotted red 5px;</div>
</body>
</html>

运行结果:

CSS border-bottom底部边框样式属性笔记

border-bottom属性说明:

  1. 三个属性值中的任意一个都可以省略
  2. 三个属性值可以任意顺序排列

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-border-bottom-2.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情