盒子是由四周的邊框組成，邊框的屬性就構(gòu)成了盒子的大部分樣式。
一、CSS 邊框類型
CSS border 屬性允許您指定元素邊框的樣式、寬度和顏色。
border-style 屬性指定要顯示的邊框類型。
允許以下值：
dotted - 定義點(diǎn)線邊框
dashed - 定義虛線邊框
solid - 定義實(shí)線邊框
double - 定義雙邊框
groove - 定義 3D 坡口邊框。效果取決于 border-color 值
ridge - 定義 3D 脊線邊框。效果取決于 border-color 值
inset - 定義 3D inset 邊框。效果取決于 border-color 值
outset - 定義 3D outset 邊框。效果取決于 border-color 值
none - 定義無邊框
hidden - 定義隱藏邊框
border-style 屬性可以設(shè)置一到四個值（用于上邊框、右邊框、下邊框和左邊框）。
注意：除非設(shè)置了 border-style 屬性，否則其他 CSS 邊框?qū)傩裕▽⒃谙乱徽轮性敿?xì)講解）都不會有任何作用！
二、CSS 邊框?qū)挾?/h2>
border-width 屬性指定四個邊框的寬度。
可以將寬度設(shè)置為特定大?。ㄒ?px、pt、cm、em 計(jì)），也可以使用以下三個預(yù)定義值之一：thin、medium 或 thick：
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
特定邊的寬度
border-width 屬性可以設(shè)置一到四個值（用于上邊框、右邊框、下邊框和左邊框）：
p.one {
border-style: solid;
border-width: 5px 20px; /* 上邊框和下邊框?yàn)?5px，其他邊為 20px */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 上邊框和下邊框?yàn)?20px，其他邊為 5px */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 上邊框 25px，右邊框 10px，下邊框 4px，左邊框 35px */
}
三、CSS 邊框顏色
border-color 屬性用于設(shè)置四個邊框的顏色。
可以通過以下方式設(shè)置顏色：
name - 指定顏色名，比如 “red”
HEX - 指定十六進(jìn)制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
注釋：如果未設(shè)置 border-color，則它將繼承元素的顏色。
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
特定邊框的顏色
border-color 屬性可以設(shè)置一到四個值（用于上邊框、右邊框、下邊框和左邊框）。
p.one {
border-style: solid;
border-color: red green blue yellow; /* 上紅、右綠、下藍(lán)、左黃 */
}
HEX 值
邊框的顏色也可以使用十六進(jìn)制值（HEX）來指定：
p.one {
border-style: solid;
border-color: #ff0000; /* 紅色 */
}
一試
RGB 值
或者使用 RGB 值：
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* 紅色 */
}
HSL 值
也可以使用 HSL 值：
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* 紅色 */
}
四、CSS Border - 簡寫屬性
處理邊框時(shí)要考慮許多屬性。為了縮減代碼，也可以在一個屬性中指定所有單獨(dú)的邊框?qū)傩浴order 屬性是以下各個邊框?qū)傩缘暮唽憣傩裕?br> border-width
border-style（必需）
border-color
p {
border: 5px solid red;
}
您還可以只為一個邊指定所有單個邊框?qū)傩裕?/p>
左邊框
p {
border-left: 6px solid red;
background-color: lightgrey;
}
下邊框
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}
五、CSS 圓角邊框
border-radius 屬性用于向元素添加圓角邊框：文章來源：http://www.zghlxwxcb.cn/news/detail-805889.html
p {
border: 2px solid red;
border-radius: 5px;
}
六、所有 CSS 邊框?qū)傩?/h2>
屬性 描述
border 簡寫屬性，在一條聲明中設(shè)置所有邊框?qū)傩浴?border-color 簡寫屬性，設(shè)置四條邊框的顏色。
border-radius 簡寫屬性，可設(shè)置圓角的所有四個 border-*-radius 屬性。
border-style 簡寫屬性，設(shè)置四條邊框的樣式。
border-width 簡寫屬性，設(shè)置四條邊框的寬度。
border-bottom 簡寫屬性，在一條聲明中設(shè)置所有下邊框?qū)傩浴?border-bottom-color 設(shè)置下邊框的顏色。
border-bottom-style 設(shè)置下邊框的樣式。
border-bottom-width 設(shè)置下邊框的寬度。
border-left 簡寫屬性，在一條聲明中設(shè)置所有左邊框?qū)傩浴?border-left-color 設(shè)置左邊框的顏色。
border-left-style 設(shè)置左邊框的樣式。
border-left-width 設(shè)置左邊框的寬度。
border-right 簡寫屬性，在一條聲明中設(shè)置所有右邊框?qū)傩浴?border-right-color 設(shè)置右邊框的顏色。
border-right-style 設(shè)置右邊框的樣式。
border-right-width 設(shè)置右邊框的寬度。
border-top 簡寫屬性，在一條聲明中設(shè)置所有上邊框?qū)傩浴?border-top-color 設(shè)置上邊框的顏色。
border-top-style 設(shè)置上邊框的樣式。
border-top-width 設(shè)置上邊框的寬度。
七、練習(xí)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>編程筆記 html5&css&js CSS邊框?qū)傩?lt;/title>
<meta charset="utf-8" />
<style>
body {
margin: 0 auto;
padding: 0;
height: 100%;
display: block;
justify-content: center;
align-items: center;
color: greenyellow;
background: #000;
}
.box1 {
width: 800px;
height: 800px;
background-color: black;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 0px;
margin: 50px auto;
}
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;
}
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
p.groove {
border-style: groove;
}
p.ridge {
border-style: ridge;
}
p.inset {
border-style: inset;
}
p.outset {
border-style: outset;
}
p.none {
border-style: none;
}
p.hidden {
border-style: hidden;
}
p.mix {
border-style: dotted dashed solid double;
}
p.radius {
border: 2px solid red;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box1">
<h1>border-style 屬性</h1>
<p>此屬性規(guī)定要顯示的邊框類型：</p>
<p class="dotted">dotted 點(diǎn)狀邊框。</p>
<p class="dashed">dashed 虛線邊框。</p>
<p class="solid">solid 實(shí)線邊框。</p>
<p class="double">double 雙線邊框。</p>
<p class="groove">groove 凹槽邊框。</p>
<p class="ridge">ridge 壟狀邊框。</p>
<p class="inset">inset 3D inset 邊框。</p>
<p class="outset">outset 3D outset 邊框。</p>
<p class="none">none 無邊框。</p>
<p class="hidden">hidden 隱藏邊框。</p>
<p class="mix">mix 混合邊框。</p>
<p class="radius">
border-radius
<br />
圓角邊框。
</p>
</div>
</body>
</html>
小結(jié)
屬性 描述
border 簡寫屬性，在一條聲明中設(shè)置所有邊框?qū)傩浴?border-color 簡寫屬性，設(shè)置四條邊框的顏色。
border-radius 簡寫屬性，可設(shè)置圓角的所有四個 border-*-radius 屬性。
border-style 簡寫屬性，設(shè)置四條邊框的樣式。
border-width 簡寫屬性，設(shè)置四條邊框的寬度。
border-bottom 簡寫屬性，在一條聲明中設(shè)置所有下邊框?qū)傩浴?border-bottom-color 設(shè)置下邊框的顏色。
border-bottom-style 設(shè)置下邊框的樣式。
border-bottom-width 設(shè)置下邊框的寬度。
border-left 簡寫屬性，在一條聲明中設(shè)置所有左邊框?qū)傩浴?border-left-color 設(shè)置左邊框的顏色。
border-left-style 設(shè)置左邊框的樣式。
border-left-width 設(shè)置左邊框的寬度。
border-right 簡寫屬性，在一條聲明中設(shè)置所有右邊框?qū)傩浴?border-right-color 設(shè)置右邊框的顏色。
border-right-style 設(shè)置右邊框的樣式。
border-right-width 設(shè)置右邊框的寬度。
border-top 簡寫屬性，在一條聲明中設(shè)置所有上邊框?qū)傩浴?border-top-color 設(shè)置上邊框的顏色。
border-top-style 設(shè)置上邊框的樣式。
border-top-width 設(shè)置上邊框的寬度。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>編程筆記 html5&css&js CSS邊框?qū)傩?lt;/title>
<meta charset="utf-8" />
<style>
body {
margin: 0 auto;
padding: 0;
height: 100%;
display: block;
justify-content: center;
align-items: center;
color: greenyellow;
background: #000;
}
.box1 {
width: 800px;
height: 800px;
background-color: black;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 0px;
margin: 50px auto;
}
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;
}
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
p.groove {
border-style: groove;
}
p.ridge {
border-style: ridge;
}
p.inset {
border-style: inset;
}
p.outset {
border-style: outset;
}
p.none {
border-style: none;
}
p.hidden {
border-style: hidden;
}
p.mix {
border-style: dotted dashed solid double;
}
p.radius {
border: 2px solid red;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box1">
<h1>border-style 屬性</h1>
<p>此屬性規(guī)定要顯示的邊框類型：</p>
<p class="dotted">dotted 點(diǎn)狀邊框。</p>
<p class="dashed">dashed 虛線邊框。</p>
<p class="solid">solid 實(shí)線邊框。</p>
<p class="double">double 雙線邊框。</p>
<p class="groove">groove 凹槽邊框。</p>
<p class="ridge">ridge 壟狀邊框。</p>
<p class="inset">inset 3D inset 邊框。</p>
<p class="outset">outset 3D outset 邊框。</p>
<p class="none">none 無邊框。</p>
<p class="hidden">hidden 隱藏邊框。</p>
<p class="mix">mix 混合邊框。</p>
<p class="radius">
border-radius
<br />
圓角邊框。
</p>
</div>
</body>
</html>
也可以根據(jù)自己的喜好做一個編排。文章來源地址http://www.zghlxwxcb.cn/news/detail-805889.html
到了這里，關(guān)于編程筆記 html5&css&js 041 CSS邊框?qū)傩缘奈恼戮徒榻B完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
