邊框樣式的使用 CSS入門基礎(011)

2021-10-12 09:57:49 字數 1797 閱讀 7203

今天我們說說邊框樣式的內容。

在網頁中,任何塊元素和行內元素都可以設定邊框屬性。像div、img、table、span都可以設定邊框屬性的。

設定邊框一般有三個方面,一是邊框的寬度,二是邊框的外觀,三是邊框的顏色。

語法:

border-width:畫素值;border-style:屬性值;border-color:顏色值;
邊框的屬性

屬性說明

border-width

邊框的寬度

border-style

邊框的外觀

border-color

邊框的顏色

在對乙個元素設定邊框時,必須同時設定以上三個屬性,邊框才有效果出現。

border-width屬性:

語法:

border-width:畫素值;
border-style屬性:

語法:

border-style:屬性值;
border-style屬性值

屬性值說明

none

無樣式hidden

與none相同,對於表,hidden用於解決邊框衝突

solid

實線dashed

虛線dotted

點線double雙線

示例**:

none

hidden

solid

dashed

dotted

double

border-style屬性值(3d邊框)

屬性值說明

inset

內凹outset

外凸ridge

脊線groove槽線

示例**:

inset

outset

ridge

groove

需要使用3d邊框時,邊框的寬度需要大一些,才會有效果。

雖然以上屬性值比較多,但是在實際開發中,也只有solid和dashed這兩個屬性用的多一些,其他基本不用。

border-color屬性:

語法:

border-color:顏色值;
對於顏色,可以使用關鍵字顏色,也可以使用十六進製制顏色。

簡潔寫法:

定義乙個元素的邊框必須同時設定三個屬性:border-width,border-style和border-color。但是每個元素都寫三遍,不僅麻煩,還容易出錯。

css有一種簡潔寫法,可以減少**量,並且非常好用。

語法:

border: 1px solid black;邊框:寬度 外觀 顏色;
原則上這種寫法是沒有順序的,但是為了規範些,建議大家按照以上寫法,進行簡潔語法。

下節我們接著分享邊框樣式的內容。

區域性邊框的使用 CSS入門基礎(012)

今天我們接著分享邊框樣式的使用。我們都知道邊框有上下左右,四條邊,那麼如果我們要對其中的某一條邊設定,我該怎麼辦?在css中,我們是可以分別對上下左右的邊進行單獨的樣式設定的。上邊框border top border top width 1px border top style solid bord...

背景樣式的使用 CSS入門基礎(013)

今天我們分享關於背景樣式的內容。在css中,背景樣式主要有兩種 背景顏色和背景影象。在傳統的web 1.0時代中,一般都是使用元素的backgroud屬性,來為body table和td等少數的標籤定義背景影象。在web 2.0時代,主要是使用css的background屬性來定義。背景影象 背景影...

字型樣式 CSS入門基礎(005)

今天我們分享關於字型樣式的內容。在網頁開發中,需要優先考慮頁面的文字樣式屬性。包括字型 大小 粗細 顏色等 css字型樣式屬性 屬性值說明 font family 字型型別 font size 字型大小 font style 字型斜體 color 字型顏色 除了字型顏色以外,其他文字屬性都是font...