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

2021-09-22 18:22:32 字數 1572 閱讀 6674

好程式設計師web前端分享css3 邊框,通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 - 並且不需使用設計軟體,比如 photoshop。

在本章中,您將學到以下邊框屬性:

border-radius

box-shadow

border-image

瀏覽器支援

internet explorer 9+ 支援 border-radius 和 box-shadow 屬性。

firefox、chrome 以及 safari 支援所有新的邊框屬性。

注釋:對於 border-image,safari 5 以及更老的版本需要字首 -webkit-。

opera 支援 border-radius 和 box-shadow 屬性,但是對於 border-image 需要字首 -o-。

css3 圓角邊框

在 css2 中新增圓角矩形需要技巧。我們必須為每個圓角使用不同的。

在 css3 中,建立圓角是非常容易的。

在 css3 中,border-radius 屬性用於建立圓角:

例項

向 div 元素新增圓角:

divcss3 邊框陰影

在 css3 中,box-shadow 用於向方框新增陰影:

例項

向 div 元素新增方框陰影:

divcss3 邊框

用於建立上面的邊框的原始:

例項

div新的邊框屬性

屬性

描述

css

border-image

設定所有 border-image-* 屬性的簡寫屬性

3

border-radius

設定所有四個 border-*-radius 屬性的簡寫屬性

3

box-shadow

向方框新增乙個或多個陰影

3

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

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

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

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

好程式設計師web前端技術分享css3舊版彈性盒

說明 必須加字首 設定彈性盒 使用如下屬性,必須在父代設定display box 說明 在父級上設定該屬性,則子代按水平排列或豎直排列。注 所有主流瀏覽器不支援該屬性,必須加上字首。1 horizontal 水平排列,子代總width 父級width。若父級固定寬度,則子代設定的width無效,子代...