CSS 邊框樣式

節我們來學習邊框樣式，主要包括如何設置邊框的寬度、邊框的顏色、邊框的樣式等。當我們給某個元素設置邊框時，可以分為上下左右四個邊框，既可以同時設置四個邊框的樣式，也可以分開設置四個邊框的樣式。

關于邊框樣式的四個屬性：

border-width

border-width 屬性用于設置邊框的寬度，也就是邊框的粗細。

常用屬性值如下所示：

我們一般會使用 length 作為 border-width 屬性的屬性值，即設置邊框的粗細為多少像素，例如 1px、2px、3px 等。border-width 屬性可以同時為所有邊框設置寬度，也可以單獨地為每個邊框設置寬度。

示例：

為上、右、下、左四個邊框分別設置邊框粗細：

border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;

根據簡寫屬性 border-width，我們也可以直接寫成：

border-width:1px 2px 3px 4px;

記住在簡寫時，為邊框設置寬度的順序為上、右、下、左，是順時針順序。

而當元素的上下邊框或左邊框的寬度一致時，也可以使用簡寫，例如上下邊框為1px、左右邊框為2px，可以寫成：

border-width:1px 2px;

border-style

border-style 屬性用于設置元素的邊框樣式。和 border-width 一樣，可以同時為四個邊框設置邊框樣式，也可以分別為每個邊框單獨設置邊框樣式。

border-style 的屬性值有很多個，但是在實際網頁制作中，常用屬性值有下面四種：

示例：

例如設置上、右、下、左的邊框樣式為實線、虛線、實線、虛線：

border-top-style:solid;
border-right-style:dashed;
border-bottom-style:solid;
border-left-style:dashed;

可以簡寫成：

border-style: solid dashed solid dashed;

當元素的上下邊框和左右邊框樣式一致時，也可以寫成：

border-style: solid dashed;

border-color

border-color 屬性可以用于設置邊框顏色。屬性值可以是任何合法的顏色值，例如顏色名、十六進制顏色值、RGB顏色值等。

border-color 屬性同樣可以同時設置四個邊框的顏色，也可以單獨設置四條邊框的顏色。

示例：

例如設置上、右、下、左邊框顏色為紅黃藍綠：

border-top-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-left-color:green;

可以簡寫為：

border-color:red yellow blue green;

border

上面我們講了 border-width、border-style、border-color 三個屬性，但是其實我們在實際應用中，一般不會單獨來設置邊框寬度或者顏色等，而是直接使用通過 border 簡寫屬性來設置所有的邊框屬性。

border 屬性可以直接設置所有邊框的樣式，如果要單獨設置每個邊框的樣式則可以使用 border-top、border-right、border-bottom、border-left。

示例：

將下面這個<div> 標簽的邊框設置成 3像素、虛線、紫色：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS學習(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div>設置一個邊框</div>
    </body>
</html>

CSS 樣式代碼：

div{
    width: 100px;
    height: 100px;
    border:3px dashed purple;
}

在瀏覽器中的演示效果：

鏈接：https://www.9xkd.com/

次，我們來講解應用 CSS 來裝飾表格。

如何制作一個表格，我們在HTML課程中已經學習過了?，F在，我們通過樣式，讓表格變得更加美觀易用。

首先來學習如何定義表格邊框。

要在CSS中指定表格的邊框，可以使用 border 屬性。我們來舉個例子。

創建 tables.html 文件和 tables-style.css 文件。在 html 里構建基礎代碼，引入外部樣式。

在 body 里編寫 emmet 命令：table>(tr>th*2)+(tr>td*2)*3，填入一些文本。

HTML
<table>
    <tr>
      <th>千鋒名師</th>
      <th>最新作品</th>
    </tr>
    <tr>
      <td>浠浠呀</td>
      <td>《HTML+CSS前端入門》</td>
    </tr>
    <tr>
      <td>陸榮濤</td>
      <td>《Vite學習指南》</td>
    </tr>
    <tr>
      <td>Kerwin</td>
      <td>《Vue2+Vue3全套教程》</td>
    </tr>
  </table>

在瀏覽器里預覽效果：表格的結構有了，還沒有邊框。大家還記得如何通過 html 屬性定義邊框嗎？可以評論上告訴我。

現在，我們通過樣式來給表格添加邊框。定義群組選擇器 table, th, td，聲明樣式：border: 1px solid。

再看效果，表格線出現了，可是外觀上看，線條有點粗。是因為 table、th和td元素都有獨立的邊框。

CSS
table, th, td {
  border: 1px solid;
}

可以應用 border-collapse 屬性，把表格的邊框折疊成一個單一的邊框。

回到 CSS，再給 table 元素聲明樣式：border-collapse: collapse。

此時，表格線變細了。

CSS
table {
  border-collapse: collapse;
}

當前表格看起來很小，如果我們需要一個橫跨整個屏幕的表格，該如何實現呢？

回到CSS，再給 table 添加樣式 width: 100%。

再看一下效果，表格橫向撐滿了整個屏幕。

接下來，我們來定義表格的寬度和高度。

width 和 height 屬性用來定義表格的寬度和高度。我們來實驗一下。

將 table 的 width 屬性修改為 50%，再給 th 聲明樣式 height: 70px。

我們看，表格寬度縮小了一半，同時表頭的高度也變大到 70px 了。

接下來，我們來設置表格的對齊方式。

text-align 屬性用來設置 th 或 td 中內容的水平對齊方式，如居左、居右或居中對齊。默認情況下，th 元素的內容是居中對齊的，td 元素的內容是左對齊的。要使 td 元素的內容也居中對齊，可以使用text-align: center。舉個例子：

回到CSS，給 td 添加樣式：text-align: center。

此時，全部 td 里的內容在單元格里水平居中顯示了。

要使內容左對齊，可以使用 text-align: left 屬性。

比如將 th 元素的對齊方式改為左對齊。

CSS
th {
  height: 70px;
  text-align: left;
}

vertical-align 屬性用來設置 th 或 td 中內容的垂直對齊方式。如頂部對齊、底部對齊或中間對齊。默認情況下，對于 th 和 td 元素，表格中內容的垂直對齊方式是中間對齊。舉個例子：

回到 CSS，給 td 添加樣式：height: 50px，vertical-align: bottom。

我們看， td 單元格里的內容垂直底部對齊了。

接下來，給表格添加內填充、水平分隔線、鼠標滑過高亮及顏色等樣式。

要控制表格中邊框和內容之間的空間，可以給 td 和 th 元素設置 padding 屬性。

回到 CSS，先注釋掉 th 和 td 的樣式。定義選擇器 th, td，聲明樣式：padding: 15px，text-align: left。

CSS
th, td {
  padding: 15px;
  text-align: left;
}

看一下效果，內容和邊框線之間就具有了 15px 的填充。

接下來通過給 th 和 td 添加 border-bottom 屬性，實現表格的水平分隔線效果。

注釋掉原有的 border 屬性，給 th 和 td 添加樣式：border-bottom: 1px solid #ddd。

CSS
table, th, td {
  /* border: 1px solid; */
}
th, td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

我們看，水平分隔線的表格效果就實現了。

在 tr 上使用 :hover 選擇器，在鼠標移過時突出顯示表格的行。

回到CSS，定義選擇器 tr:hover，聲明樣式：background-color: coral。kerou

當鼠標滑過每一行時，當前行就高亮顯示了。

我們也可以專門給某一行添加背景色，比如給 th 添加一個綠色背景。

再單獨給 th 定義樣式：background-color: #04AA6D，color: white;

CSS
th {
  background-color: #04AA6D;
  color: white;
}

這樣，通過給 th 添加背景色，使表頭的顯示更加醒目了。

本文配套教程鏈：https://www.bilibili.com/video/BV1oU4y1278g?p=101

. block(區塊)

block面板主要是設置對象文本的文字間距、對齊方式、上標、下標、排列方式、首行縮進等。

(1)word-spacing：設置單詞之間的間距?？梢栽O置負值。

默認值:normal

(2)letter-spacing：設置字符之間的間距?？梢灾付ㄘ撝?。因為中文也是字符, 這個參數可以設置文字間的間距。

默認值:normal

(3)vertical-align：指定元素的垂直對齊方式。針對<td>表格設置垂直對齊方法,但是對<div>設置無效,可以將display屬性設置為table-cell值;

可以指定sub(下標)、super(上標)、top(與頂端對齊)、middle(居中)、bottom(與底端對齊)等。適用于行內塊元素 img、input、td等

baseline 默認。元素放置在父元素的基線上。

sub 垂直對齊文本的下標。

super 垂直對齊文本的上標

top 把元素的頂端與行中最高元素的頂端對齊

text-top 把元素的頂端與父元素字體的頂端對齊

middle 把此元素放置在父元素的中部。

bottom 把元素的頂端與行中最低的元素的頂端對齊。

text-bottom 把元素的底端與父元素字體的底端對齊。

% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。

inherit 規定應該從父元素繼承 vertical-align 屬性的值。

默認值: baseline

(4)text-align：設置文本的排列方式(適用于行內元素和行內塊元素, 如 a、span、input、img、label等元素)。left(左對齊)、right(右對齊)、center(居中)、justify(兩端對齊)。也可用于<hr/>下劃線對齊方式

默認值：如果 direction 屬性是 ltr, 則默認值是 left；如果 direction 是 rtl，則為 right。(關于CSS direction 屬性看下面的內容介紹)

text-align 和margin auto 區別

text-align 可以讓塊級元素里面的文字內容居中對齊.

文字內容==(圖片 input 行內元素行內塊元素)

但是對于里面的塊級元素無效

讓一個塊級元素居中對齊： margin:0 auto;

(5)text-indent：設置文本第一行的縮進值。負值用于將文本第一行向外拉, 主要給<p>設置首行。

要在每段前空兩格,可設置為2em，因為em是當前字體尺寸，2em就是兩個字的大小。

默認值： not specified(沒有規定的)

p{font-size:12px;text-indent:2em;}

上述代碼就是可以實現段落首行縮進24px(也就是兩個字體大小的距離)。

(6)white-space：設置如何處理元素內的空白符。有三個選項可選：

normal 會將空白符全部壓縮；

pre 則會如同處理pre標簽內的文本一樣處理這些空白符,也就是說，所有的空白符，包括空格，標簽，回車，等都會得以保留；

nowrap 指定文本只有遇到br標簽時才換行。

默認值: normal

(7)display: none 此元素不會被顯示。

block 此元素將顯示為塊級元素，此元素前后會帶有換行符。

inline 默認值。此元素會被顯示為內聯元素，元素前后沒有換行符。

inline-block 行內塊元素。(CSS2.1 新增的值)

list-item 此元素會作為列表顯示。

run-in 此元素會根據上下文作為塊級元素或內聯元素顯示。

compact CSS 中有值 compact，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。

marker CSS 中有值 marker，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。

table 此元素會作為塊級表格來顯示(類似 <table>)，表格前后帶有換行符。

inline-table 此元素會作為內聯表格來顯示(類似 <table>)，表格前后沒有換行符。

table-row-group 此元素會作為一個或多個行的分組來顯示(類似 <tbody>)。

table-header-group 此元素會作為一個或多個行的分組來顯示(類似 <thead>)。

table-footer-group 此元素會作為一個或多個行的分組來顯示(類似 <tfoot>)。

table-row 此元素會作為一個表格行顯示(類似 <tr>)。

table-column-group 此元素會作為一個或多個列的分組來顯示(類似 <colgroup>)。

table-column 此元素會作為一個單元格列顯示(類似 <col>)

table-cell 此元素會作為一個表格單元格顯示(類似 <td> 和 <th>)

table-caption 此元素會作為一個表格標題顯示(類似 <caption>)

inherit 規定應該從父元素繼承 display 屬性的值。

默認值： inline

常用的屬性:

display:none; //隱藏
display:block //顯示(將行內元素轉換為塊元素)
dispaly:inline //將塊元素轉換行內元素
dispaly:inline-block //將塊元素轉換為行內塊元素
display:table-cell; //此元素會作為一個表格單元格顯示(類似 <td> 和 <th>) 用于多行文本、塊元素垂直居中

以上轉換涉及行內塊元素(img、input)轉換;

經過大量的測試證明：屬性display是不能用于轉換行內塊元素(img、input)

同義詞: 內聯元素(行內元素)

4. box(方框或盒子) 主要針對圖片、表格、層、段落(p)、標題(h1-h6)等

box面板主要設置對象的邊界、間距、高度、寬度、和漂浮方式等。

(1)width：定義元素的寬。

默認值:auto

(2)height：定義元素的高。

默認值:auto

以上width、height屬性如果是針對div標簽設置css樣式，則與定位設置窗口width、height屬性一致(Dreamweaver會自動填充數據)

在父元素和子元素都設置了高度和寬度的情況下：

如果子元素的寬度超出了它的父元素的寬度, 則會父元素不會限制其顯示寬度;

如果子元素的高度超出了它的父元素的高度, 則會父元素不會限制其顯示高度;

(3)float：定義元素的漂浮方式。left 表示對象浮在左邊、right表示對象浮在右邊、none 表示對象不浮動。

默認值:none

一個span標簽不需要轉成塊級元素, 就能夠設置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經不區分行內、塊了。

也就是說, 一旦一個元素浮動了, 那么, 將能夠并排了, 并且能夠設置寬高了。無論它原來是個div還是個span。

span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}

(4)clear：不允許元素的漂浮，相對于前一個<div>設置浮動時，下一個有清除設置的元素就會移到它的下面。

left表示不允許左邊有浮動對象 right表示不允許右邊有浮動對象

none 表示允許兩邊都可以有浮動對象 both 不允許有浮動對象。

默認值:none

浮動的主要作用是將塊元素排在同一行(span也可以設置浮動);

浮動元素它會向左或者向右進行浮動, 所謂浮動可以理解"飄";

浮動元素向它遇到父元素的邊框就停止浮動;

浮動元素的層級會比普通元素要高, 并且它不會再占用原有的高度;

浮動元素只會影響后面的元素, 不會影響前面的元素：

浮動元素的后面的元素(可能是一個也可能是多個元素受到影響)也會繼承浮動元素的特性, 它也會浮動了要解決這個問題有兩辦法;

第一個：需要清除浮動

第二個：給父元素設置一個高度(子元素都設置了height高度條件下), 不建議使用

清除浮動后它不會影響到它后面的元素, 父元素會將所有的浮動元素包圍者

當然浮動元素對后面的元素的影響可以做首字母方法, 圖文混排(文字環繞圖片)等特效；

(5)padding：定義元素內容與其邊框的空距(如果元素沒有邊框就是指頁邊的空白)。

可以分別設置分別設置上、右、下、左內邊距。

padding-top

padding-right

padding-bottom

padding-left

p {padding:20px} 設置設置上、右、下、左內邊距都為20px

p {margin: 20px 30px 30px 20px;} 設置padding-top padding-right padding-bottom padding-left分別為20px 30px 30px 20px

默認值：0。

要懂得, 用小屬性層疊大屬性：

padding: 20px;

padding-left: 30px;

注意：大屬性要寫在前面, 小屬性寫在后面;

比如：

div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}

padding-left:10px和padding-right:20px沒用, 因為后面的padding大屬性, 層疊覆蓋了。

(6)margin：定義元素的邊框與其他元素之間的距離(如果沒有邊框就是指內容之間的距離)。

可以分別設置上邊界、右邊界、下邊界、左邊界的值。

margin-top

margin-right

margin-bottom

margin-left

p {margin:20px}

p {margin:10px 0px 15px 5px;}

默認值：0

marign：上邊界值右邊界值下邊界值左邊界值

margin屬性值必須按照上面順序進行排列,以空格分開。如果僅輸入一個值,則4個邊界值會同時設置為此值。

如果僅輸入兩個的值,則缺少的值會以對邊的設置值進行替代。例如：

div{margin:5px 10px 15px 20px} /*上=5px,右=10px,下=15px,左=20px*/
div{margin:5px} /*上=5px,右=5px,下=5px,左=5px*/
div{margin:5px 10px} /*上=5px,右=10px,下=5px,左=10px*/
div{margin:5px 10px 15px} /*上=5px,右=10px,下=15px,左=10px*/

5. border(邊框) 針對段落(p標簽)、圖片、表格、標題(h1-h6)、form、input等(幾乎所有的元素都可以設置邊框)

border面板可以設置對象邊框的寬度、顏色及樣式。

(1)border-width：設置元素邊的寬度?？梢苑謩e設定top(上邊寬)、right(右邊寬)、bottom(下邊寬)、left(左邊寬)的值。

border-top-width border-right-width border-bottom-width border-left-width

thin 定義細的邊框。

medium 默認。定義中等的邊框。

thick 定義粗的邊框。

length 允許您自定義邊框的寬度。

inherit 規定應該從父元素繼承邊框寬度。

默認值: medium

(2)border-color：設置邊框的顏色。你可以分別對每條邊設置顏色。

注意：我們可以通過設置不同的顏色做出亮邊和暗邊的效果，這樣元素看起來是立體的。

border-top-color border-right-color border-bottom-color border-left-color

默認值: not specified(未規定的)

(3)border-style：設置邊框樣式。

border-top-style border-right-style border-bottom-style border-left-style

可以設置為none(無邊框)、dotted(點線)、dashed(虛線)、solid(實線)、double(雙線)、

groove(凹槽,3D凹線)、ridge(凸槽,3D凸線)、inset(凹邊,3D嵌入線)、outset(凸邊,3D浮出線)等邊框樣式。

默認值:none(無邊框)

推薦：表單輸入框：inset(凹邊) 按鈕：outset(凸邊)

兼容性問題

比如, border:10px ridge red; 在chrome和firefox、IE中有細微差別：

如果公司里面的設計師, 處女座的, 追求極高的頁面還原度, 那么不能使用css來制作邊框。

就要用到圖片, 就要切圖了。所以, 比較穩定的就幾個：solid、dashed、dotted, 其他的邊框樣式盡量不要用。

border可以沒有： border: none;

某一條邊沒有： border-left: none;

也可以調整左邊邊框的寬度為0px： border-left-width: 0px;

注意：border-bottom-style：可以修改a鏈接的"下劃線"的風格

border-bottom-width：可以修改a鏈接的"下劃線"的寬度(粗細)

border-bottom-color：可以修改a鏈接的"下劃線"的顏色

在線咨詢

上一篇：傳遞祝福和吉祥-方之家先生手寫篆書春聯
下一篇：網站建設流程，如何搭建一個網站

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商