CSS3的新增邊框屬性

2022-05-05 00:51:07 字數 4623 閱讀 9637

一、css3 新增的邊框屬性

屬性

版本

簡介

border-image

css3

設定或檢索物件的邊框使用影象來填充

border-image-source

css3

設定或檢索物件的邊框是否用影象定義樣式或影象**路徑

border-image-slice

css3

設定或檢索物件的邊框背景圖的分割方式

border-image-width

css3

設定或檢索物件的邊框厚度

border-image-outset

css3

設定或檢索物件的邊框背景圖的擴充套件

border-image-repeat

css3

設定或檢索物件的邊框影象的平鋪方式

border-radius

css3

設定或檢索物件使用圓角邊框

border-top-left-radius

css3

設定或檢索物件左上角圓角邊框

border-top-right-radius

css3

設定或檢索物件右上角圓角邊框

border-bottom-right-radius

css3

設定或檢索物件右下角圓角邊框

border-bottom-left-radius

css3

設定或檢索物件左下角圓角邊框

box-shadow

css3

設定或檢索物件陰影

box-reflect

css3

設定或檢索物件的倒影

border-image

css3中新增的邊框屬性,擴充了原盒子模型的功能,使得邊框具備背景屬性。此前,border僅僅具備寬度、顏色和風格屬性.

實現邊框背景屬性,通常使用padding和background屬性進行模擬,但是這樣就為設定盒子的背景增加了難度

語法格式:該語法為css縮寫樣式

border-image

[border-image-source ** ]

說明:設定或檢索物件的邊框樣式使用影象路徑。

指定乙個影象用來替代border-style邊框樣式的屬性。當border-image為none或影象不可見時,將會顯示border-style所定義的邊框樣式效果。

對應的指令碼特性為borderimagesource。

取值:

[ border-image-slice分割方法 ]

說明:設定或檢索物件的邊框背景圖的分割方式。

該屬性指定從上,右,下,左方位來分隔影象,將影象分成4個角,4條邊和中間區域共9份,中間區域始終是透明的(即沒影象填充),除非加上關鍵字 fill。

對應的指令碼特性為borderimageslice。 

取值:

: 用浮點數指定寬度。不允許負值。

: 用百分比指定寬度。不允許負值。

[

/ [ border-image-width邊框寬度 ]? |

說明:設定或檢索物件的邊框厚度。

該屬性用於指定使用多厚的邊框來承載被裁剪後的影象。

該屬性可省略,由外部的border-width來定義。

對應的指令碼特性為borderimagewidth。 

取值:

: 用長度值指定寬度。不允許負值。

: 用百分比指定寬度。不允許負值。

: 用浮點數指定寬度。不允許負值。

auto: 如果auto值被設定,則border-image-width採用與border-image-slice相同的值。 

注意:該值得大小不會累加到盒子模型之上,chrome會有3畫素的大小,其餘瀏覽器border的大小依然為0

/ [border-image-outset 擴充套件方式 ]

說明:

置或檢索物件的邊框背景圖的擴充套件。

該屬性用於指定邊框影象向外擴充套件所定義的數值,即如果值為10px,則影象在原本的基礎上往外延展10px再顯示。

對應的指令碼特性為borderimageoutset。

取值:

: 用長度值指定寬度。不允許負值。

: 用浮點數指定寬度。不允許負值。  

]

[ border-image-repeat重複方式 ]

說明:設定或檢索物件的邊框影象的平鋪方式。

該屬性用於指定邊框背景圖的填充方式。可定義0-2個引數值,即水平和垂直方向。如果2個值相同,可合併成1個,表示水平和垂直方向都用相同的方式填充邊框背景圖;如果2個值都為                stretch,則可省略不寫。

對應的指令碼特性為borderimageoutset。

取值:

stretch: 指定用拉伸方式來填充邊框背景圖。

二、css3 新增屬性例項

css3邊框新屬性

通過css3,可以建立圓角邊框 border radius 向矩形新增陰影 border shadow 甚至使用 border image 來繪製邊框。圓角邊框 div 取值 由浮點數字和單位識別符號組成的長度值。不可為負值。border top left radius 由浮點數字和單位識別符號組成...

CSS3新增屬性用法整理CSS3新增屬性用法整理

css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...

css3 新增屬性

background origin 背景影象顯示的原點。background clip 規定背景的繪製區域。padding box 從padding區域 含padding 開始顯示背景影象。border box 從border區域 含border 開始顯示背景影象。content box 從cont...