5.边框样式-CSS基础
一、边框
几乎可以对所有元素定义边框。 我们可以为
div元素、img元素、span元素、table元素定义边框。
1.设置边框的三方面
- 边框宽度
- 边框外观（实线、虚线等）
- 边框颜色
（1）边框样式属性
属性 | 说明 |
|---|---|
border-width | 边框的宽度 |
border-style | 边框的外观 |
border-color | 边框的颜色 |
想要为一个元素定义边框样式，我们必须同时设置
border-width、border-style、border-color这三个属性才会有效果。
二、整体样式
1.边框属性
（1）border-width
border-width 属性定义了边框的宽度，属性值是一个像素值。
（2）border-style
border-width 属性定义了边框的外观，常用属性值如下：
① border-width常用属性值
属性值 | 说明 |
|---|---|
none | 无样式 |
dashed | 虚线 |
solid | 实线 |
表中所列出的属性值是常用的，还有一些几乎用不上的值如：hidden、dotted、double等。
（3）border-color
border-width 属性定义了边框的颜色，属性值可以是关键字也可以是16进制RGB值。
2.简写形式
想要为一个元素定义边框样式，我们必须同时设置
border-width、border-style、border-color这三个属性才会有效果。但是这样写会造成代码量多，耗时费力，所以CSS为我们提供了一种简写形式，具体如下：
border-width:1px;
border-style:dashed;
border-color:#000000;
上面这段代码其实等价于：
border:1px dashed #000000;这就是简写形式，这是一个很有用的小技巧，在实际开发中经常能看到它的身影。
3.示例
① 例1
<!--为图片元素添加边框-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>边框样式-结构样式分离原则</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
img{
height: 300px;
border: 2px solid #00FFFF;
}
</style>
</head>
<body>
<img src="../img/水.jpg" alt="水天一色" title="水天一色">
</body>
</html>
为img设置边框-整体样式.png
② 例2
边框样式.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>边框样式-结构样式分离原则</title>
<link rel="stylesheet" type="text/css" href="../css/边框样式.css"/>
<!--
rel='stylesheet':(固定格式)引入样式表文件。
type='text/css':(固定格式)标准CSS。
href="文件路径"
-->
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
边框样式.css
div{
width:99px; /*元素选择器，选择所有div元素*/
height:45px;
}
#div1{
border:1px dashed #000000; /*边框整体样式，简写形式*/
}
#div2{
border:2px solid #FFC0CB; /*边框整体样式，简写形式*/
}
为div设置边框-整体样式.png
三、局部样式
边框其实有4条边（上下左右），之前是对四条边的整体样式，若是想要对某一条边进行单独设置，就需要属性
上边框border-top、下边框border-bottom、左边框border-left、右边框border-right。
1.上边框：border-top
（1）语法格式
border-top: 1px solid #000000
2.下边框border-bottom
（1）语法格式
border-top: 1px solid #000000
3.左边框border-left
（1）语法格式
border-top: 1px solid #000000
4.右边框border-right
（1）语法格式
border-top: 1px solid #000000
5.总结
对于边框样式，无论是整体样式还是局部样式，都需要设置三个方面：边框宽度、边框外观、边框颜色。
6.示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>边框样式-结构样式分离原则</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
span{
border: 1px solid #00FFFF; /*边框整体样式*/
border-bottom:0; /*去除下边框*/
}
</style>
</head>
<body>
<span>
东风夜放花千树，更吹落、星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。
蛾儿雪柳黄金缕，笑语盈盈暗香去。<strong>众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</strong>
</span>
</body>
</html>
为span设置边框-局部样式.png
7.border-bottom:0;实际开发
可以看到，为span标签设置边框时，我先设置边框整体样式，接着设置下边框宽度为0（即
border-bottom:0;），因为下边框没有宽度，所以下边框就被去除啦。 但我么知道想要为一个元素定义边框样式，我们必须同时设置border-width、border-style、border-color这三个属性才会有效果。但我们只设置了宽度，那边框的样式和边框的颜色怎么办？ 实际上border-bottom:0;是一种省略写法，既然边框的宽度都没有，那为何还要设置边框的样式和边框的颜色。 此外，border-bottom:0;、border-bottom:0px;和border-bottom:none;这三个是等价的。