好程式設計師web開發分享CSS3新增屬性

2021-09-24 08:58:29 字數 1354 閱讀 3289

好程式設計師web開發分享css3新增屬性

說明:指定background-origin屬性應該是相對位置屬性值:padding-box 背景影象填充框的相對位置

border-box 背景影象邊界框的相對位置

content-box 背景影象的相對位置的內容框

注:預設值為:padding-box;

說明:background-clip 屬性規定背景的繪製區域。屬性值:border-box 背景被裁剪到邊框盒。

padding-box 背景被裁剪到內邊距框。

content-box 背景被裁剪到內容框

。 注:預設值:border-box;

說明:background-size 規定背景影象的尺寸屬性值:length

規定背景圖的大小。第乙個值寬度,第二個值高度。

percentage(%)

以百分比為值設定背景圖大小

cover

把背景影象擴充套件至足夠大,以使背景影象完全覆蓋背景區域

contain

把影象影象擴充套件至最大尺寸,以使其寬度和高度完全適應內容區域。

eg:p

1、rgba 顏色模式

2、 hsl 顏色模式(了解)

3、 hsla 顏色模式(了解)

1、border-color

eg:border-color:red green #000 yellow;(上右下左)

2、border-image

border-image 屬性是乙個簡寫屬性,用於設定以下屬性:

border-image-source 用在邊框的的路徑。

border-image-slice 邊框向內偏移。

border-image-repeat 影象邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)

border-image-outset 邊框影象區域超出邊框的量

3、border-radius 圓角邊框

(1).box

(2).div1

​以斜槓/分開後面的引數:

第乙個引數表示圓角的水平半徑,第二個引數表示圓角的垂直半徑

(3).div1

​按順時針的順序,斜槓/左邊是四個圓角的水平半徑,右邊是四個圓角的垂直半徑,但是通常我們很少寫右邊的引數,那就是預設右邊等於左邊的值。

屬性值:

​eg:box-shadow: 10px 10px 5px #888888

好程式設計師web前端分享CSS3 邊框

好程式設計師web前端分享css3 邊框,通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet ex...

好程式設計師web前端分享CSS3彈性盒

box sizing box sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。box sizing box sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。為元素設定的寬度和高度決定了元素的邊框盒。就是說,為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製...

好程式設計師web前端分享CSS3彈性盒

好程式設計師web前端分享css3彈性盒 box sizing box sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。box sizing box sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。border box 為元素設定的寬度和高度決定了元素的邊框盒。就是說...