一篇文章帶你了解CSS 邊框(Border)
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
元素的(Border)邊框圍繞填充和內(nèi)容。
一、CSS邊框?qū)傩?/span>
CSS邊框?qū)傩栽试S您定義框的邊框區(qū)域。邊框可以是預(yù)定義的樣式，例如實(shí)線，雙線，虛線等，[也可以是圖像]，定義邊框的樣式（border-style），顏色（border-color）和厚度（border-width）。
1. 邊框?qū)挾葘傩?border-width)
border-width屬性指定邊框區(qū)域的寬度。用于同時(shí)設(shè)置元素邊框的所有四個(gè)邊的厚度。
例
<html><head><meta charset="utf-8"><title>項(xiàng)目title><style>p.one {border-style: solid;border-width: 5px;border-color: red;}p.two {border-style: solid;border-width: 5px 10px;border-color: red;}p.three {border-style: solid;border-width: 5px 10px 15px;border-color: red;}p.four {border-style: solid;border-width: medium 10px thick 15px;border-color: red;}style>head><body style="background-color: aqua;"><p class="one"><strong>單值語(yǔ)法：strong>：?jiǎn)蝹€(gè)值設(shè)置所有四個(gè)邊框的寬度。p><p class="two"><strong>二值語(yǔ)法：strong>第一個(gè)值設(shè)置上下邊框的寬度，第二個(gè)值設(shè)置左右邊框的寬度。p><p class="three"><strong>三值語(yǔ)法strong>：第一個(gè)值設(shè)置頂部邊框的寬度，第二個(gè)值設(shè)置左右邊框的寬度，第三個(gè)值設(shè)置 底部邊框的寬度。p><p class="four"><strong>四值語(yǔ)法strong>：每個(gè)值都按上，右，下和左的順序分別設(shè)置邊框的寬度。p><p><strong>注意strong>：必須在<code> border-width code>屬性之前聲明<code> border-style code>屬性。元素必須具有邊框，然后才能設(shè)置邊框的寬度。p>body>html>
注：
如果border-width缺少或未指定屬性值，border-width則將使用的默認(rèn)值（medium）。
2. 邊框樣式屬性 (border-style)
該border-style屬性設(shè)置框邊框的樣式。它是用于設(shè)置元素邊框所有四個(gè)側(cè)面的線型的簡(jiǎn)寫(xiě)速記屬性。
該border-style屬性可采取以下值之一：none，hidden，dashed，dotted，double，groove，inset，outset，ridge和solid 。
例：
<html><head><meta charset="utf-8"><title>項(xiàng)目title><style>p {border-width: 3px;}p.none {border-style: none;}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;}style>head><body style="background-color: aqua;"><h1>各種邊框樣式。h1><p class="none">無(wú)邊框p><p class="dotted ">虛線邊框p><p class="dashed ">虛線邊框p><p class="solid">實(shí)心邊框p><p class="double">雙邊框p><p class="groove">凹槽邊框p><p class="ridge">山脊邊界p><p class="inset">插入邊框p><p class="outset ">起始邊界p>body>html>
3. 邊框顏色屬性 (border-color)
該border-color屬性指定color框的邊框。這也是用于設(shè)置元素邊框所有四個(gè)側(cè)面的顏色的簡(jiǎn)寫(xiě)屬性。
例：
<style>p.one {border-style: solid;border-color: #ff0000;}p.two {border-style: solid;border-color: #ff0000 #00ff00;}p.three {border-style: solid;border-color: #ff0000 #00ff00 #0000ff;}p.four {border-style: solid;border-color: #ff0000 #00ff00 #0000ff #ff00ff;}style>
注意：
border-color如果單獨(dú)使用該屬性，則該屬性將不起作用。
使用border-style屬性首先設(shè)置邊框。
二、邊框簡(jiǎn)寫(xiě)速記屬性
該border ?CSS屬性是設(shè)置一個(gè)或多個(gè)單獨(dú)的邊框?qū)傩缘乃儆泴傩詁order-style，border-width和border-color在一個(gè)單一的規(guī)則。
例：
<html><head><meta charset="utf-8"><title>CSS邊框速記屬性title><style>p {border: 5px solid #ff4500;}style>head><body style="background-color: aqua;"><p>這是一個(gè)段落.p>body>html>
如果在設(shè)置border速記屬性時(shí)忽略或未指定單個(gè)border屬性的值，則將使用該屬性的默認(rèn)值（如果有）。
注：
border-color在設(shè)置元素的邊框時(shí)，如果缺少屬性值或未指定屬性值（例如border: 5px solid;），則該元素的color屬性將用作的值border-color。
在此例中，邊框?qū)⑹菍挾葹?px的黑色實(shí)線。
例：
<style>p {color: black;border: 5px solid;}style>
但是，在有border-style屬性的情況下，省略該值將不會(huì)顯示任何邊框，因?yàn)檫@個(gè)時(shí)候border-style屬性 的默認(rèn)值為none。
在下面的例子中，將沒(méi)有邊框：
<style>p {border: 5px #00ff00;}style>
三、總結(jié)
本文基于CSS基礎(chǔ)，介紹了關(guān)于邊框的相關(guān)屬性，定義邊框的寬度，邊框的顏色，邊框的樣式。對(duì)每一種屬性通過(guò)案例詳細(xì)的講解。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡(jiǎn)單，希望能夠幫助讀者更好的去學(xué)習(xí)。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行