有關於 CSS Border 的相關屬性的用法

2021-06-29 07:08:42 字數 2565 閱讀 8403

1、四個邊框

border-left設定左邊框,一般單獨設定左邊框樣式使用

border-right設定右邊框,一般單獨設定右邊框樣式使用

border-top設定上邊框,一般單獨設定上邊框樣式使用

border-bottom設定下邊框,一般單獨設定下邊框樣式使用,有時可將下邊框樣式作為css下劃線效果應用。

2、四邊相同邊框border簡寫

#divcss5

設定了divcss5物件盒子1px畫素藍色實線邊框

3、邊框三個樣式

通常我們可以對邊框設定寬度(厚度)、邊框樣式、邊框顏色這三個屬性與引數。

1)、邊框顏色:border-color:#000

2)、邊框厚度(寬度):border-width:1px

使用數字+單位設定邊框厚度寬度,如1px(邊框厚度寬度為1畫素),邊框必須為正數字,大於0的數值。否則設定邊框border樣式無效。

3)、border邊框樣式:border-style:solid

邊框樣式值如下:

none :  無邊框。與任何指定的border-width值無關

hidden :  隱藏邊框。ie不支援

dotted :  在mac平台上ie4+與windows和unix平台上ie5.5+為點線。否則為實線(常用)

dashed :  在mac平台上ie4+與windows和unix平台上ie5.5+為虛線。否則為實線(常用)

solid :  實線邊框(常用)

double :  雙線邊框。兩條單線與其間隔的和等於指定的border-width值

groove :  根據border-color的值畫3d凹槽

ridge :  根據border-color的值畫菱形邊框

inset :  根據border-color的值畫3d凹邊

outset :  根據border-color的值畫3d凸邊

4)、邊框樣式截圖:

邊框border-style樣式效果圖

以縮寫方式寫上、下、左、右邊框單獨css樣式設定方法

1、1px黑色虛線上邊框

border-top:1px dashed #000

2、1px黑色實線下邊框

border-bottom:1px solid #000

3、1px黑色虛線左邊框

border-left:1px dashed #000

4、1px黑色實線右邊框

border-right:1px solid #000

我們通常使用主流瀏覽器相容邊框樣式有:

1、實線邊框:solid

border:1px solid #000 設定物件1px(畫素)寬厚的黑色實線邊框。

2、虛線邊框:dashed

border:1px dashed #000 設定物件1px(畫素)寬厚的黑色虛線邊框。

設定物件邊框樣式,設定單獨上邊框、下邊框、左邊框、右邊框樣式,實現美化美觀。邊框起到分割、規劃布局作用。

css border邊框屬性語法結構分析圖(簡寫優化的邊框border)

描述:為了觀察案例效果我們設定乙個css寬度為200px,css高度1px,紅色實線邊框的div盒子

css**:

#divcss5

html**對應片段:

我的高度為100px,寬度為200px

邊框border樣式應用示範案例截圖

我們使用div css設定邊框border樣式,一般我們使用簡寫表示式進行設定物件邊框border樣式,這樣節約**簡化**作用。無論是單獨設定乙個邊的邊框還是四邊邊框,我們都盡量縮寫方式簡寫css邊框**,css 邊框優化簡寫,常見對物件設定css樣式使用屬性**:border:1px solid #000;。

如左右下有邊框並且樣式為黑色1px寬度實線邊框,而上邊沒有邊框。

css **: border:1px solid #000; border-top:none;

注意border:1px solid #000; 和border-top:none;前後順序不能調換。因為css讀取有從上到下、從左到右讀取原理,而先設定了整個邊框樣式,後再加上宣告頂部上邊邊框為「none」沒有意思,即實現該例項要的樣式。從而無需分別設定下、左、右,從而節約一定**。

有關web的相關知識

今天的主要內容 一 web應用的相關知識 1 桌面應用程式c s和web應用程式b s 2 http協議 3 rul 4 web伺服器軟體 5 的系統的組成 二 安裝伺服器軟體tomcat 獲取 站點 http是一種無狀態的協議 是乙個簡單的請求響應序列 test.html的定為,資源定為。url統...

有關濾鏡的相關知識

濾鏡,主要是用來實現影象的各種特殊效果。它在photoshop中 具有非常神奇的作用。所有的濾鏡在photoshop中都按分類放置在選單中,使用時只需要從該選單中執行這命令即可。濾鏡的操作是非常簡單的,但是真正 用起來卻很難恰到好處。濾鏡通常需要同通道 圖層等聯合使用,才能取得最佳藝術效果。如果想在...

有關fsockopen相關隨筆

測試環境,從本機 windows 訪問內外一台linux伺服器 此伺服器裝的是nginx 伺服器上的index.php如下 echo 1 1.使用http1.1協議請求 input.host ip end 如果不加下面這一句,請求會阻塞很久 如果加上了沒有注釋 input.host ip end 這...