一、邊框
幾乎可以對所有元素定義邊框。
我們可以為
div元素、img元素、span元素、table元素定義邊框。
1.設(shè)置邊框的三方面
- 邊框?qū)挾?/strong>
- 邊框外觀（實(shí)線、虛線等）
- 邊框顏色
（1）邊框樣式屬性
| 屬性 | 說明 |
|---|---|
| border-width | 邊框的寬度 |
| border-style | 邊框的外觀 |
| border-color | 邊框的顏色 |
想要為一個(gè)元素定義邊框樣式，我們必須同時(shí)設(shè)置
border-width、border-style、border-color這三個(gè)屬性才會(huì)有效果。
二、整體樣式
1.邊框?qū)傩?/h3>
（1）border-width
border-width 屬性定義了邊框的寬度，屬性值是一個(gè)像素值。
（2）border-style
border-width 屬性定義了邊框的外觀，常用屬性值如下：
① border-width常用屬性值
border-width 屬性定義了邊框的寬度，屬性值是一個(gè)像素值。
border-width 屬性定義了邊框的外觀，常用屬性值如下：
| 屬性值 | 說明 |
|---|---|
| none | 無樣式 |
| dashed | 虛線 |
| solid | 實(shí)線 |
表中所列出的屬性值是常用的，還有一些幾乎用不上的值如：hidden、dotted、double等。
（3）border-color
border-width 屬性定義了邊框的顏色，屬性值可以是關(guān)鍵字也可以是16進(jìn)制RGB值。
2.簡寫形式
想要為一個(gè)元素定義邊框樣式，我們必須同時(shí)設(shè)置
border-width、border-style、border-color這三個(gè)屬性才會(huì)有效果。但是這樣寫會(huì)造成代碼量多，耗時(shí)費(fèi)力，所以CSS為我們提供了一種簡寫形式，具體如下：
border-width:1px;
border-style:dashed;
border-color:#000000;
上面這段代碼其實(shí)等價(jià)于：
border:1px dashed #000000;
這就是簡寫形式，這是一個(gè)很有用的小技巧，在實(shí)際開發(fā)中經(jīng)常能看到它的身影。
3.示例
① 例1
<!--為圖片元素添加邊框-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必須放在title標(biāo)簽及其它meta標(biāo)簽前-->
<title>邊框樣式-結(jié)構(gòu)樣式分離原則</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>
② 例2
邊框樣式.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必須放在title標(biāo)簽及其它meta標(biāo)簽前-->
<title>邊框樣式-結(jié)構(gòu)樣式分離原則</title>
<link rel="stylesheet" type="text/css" href="../css/邊框樣式.css"/>
<!--
rel='stylesheet':(固定格式)引入樣式表文件。
type='text/css':(固定格式)標(biāo)準(zhǔn)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; /*邊框整體樣式，簡寫形式*/
}
三、局部樣式
邊框其實(shí)有4條邊（上下左右），之前是對四條邊的整體樣式，若是想要對某一條邊進(jìn)行單獨(dú)設(shè)置，就需要屬性
上邊框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.總結(jié)
對于邊框樣式，無論是整體樣式還是局部樣式，都需要設(shè)置三個(gè)方面：邊框?qū)挾?、邊框外觀、邊框顏色。
6.示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必須放在title標(biāo)簽及其它meta標(biāo)簽前-->
<title>邊框樣式-結(jié)構(gòu)樣式分離原則</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>
東風(fēng)夜放花千樹，更吹落、星如雨。寶馬雕車香滿路。鳳簫聲動(dòng)，玉壺光轉(zhuǎn)，一夜魚龍舞。
蛾兒雪柳黃金縷，笑語盈盈暗香去。<strong>眾里尋他千百度，驀然回首，那人卻在，燈火闌珊處。</strong>
</span>
</body>
</html>
7.border-bottom:0;實(shí)際開發(fā)
可以看到，為span標(biāo)簽設(shè)置邊框時(shí)，我先設(shè)置邊框整體樣式，接著設(shè)置下邊框?qū)挾葹?（即
border-bottom:0;），因?yàn)橄逻吙驔]有寬度，所以下邊框就被去除啦。但我么知道想要為一個(gè)元素定義邊框樣式，我們必須同時(shí)設(shè)置
border-width、border-style、border-color這三個(gè)屬性才會(huì)有效果。但我們只設(shè)置了寬度，那邊框的樣式和邊框的顏色怎么辦？實(shí)際上
border-bottom:0;是一種省略寫法，既然邊框的寬度都沒有，那為何還要設(shè)置邊框的樣式和邊框的顏色。此外，
border-bottom:0;、border-bottom:0px;和border-bottom:none;這三個(gè)是等價(jià)的。
