css 科技 邊框 CSS3 邊框

css3 邊框

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 元素新增圓角：div

border:2px solid;

border-radius:25px;

-moz-border-radius:25px; /* old firefox */

css3 邊框陰影

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

例項向 div 元素新增方框陰影：div

box-shadow: 10px 10px 5px #888888;

css3 邊框

border-image 屬性允許您規定用於邊框的！

例項border-image:url(border.png) 30 30 round;

-moz-border-image:url(border.png) 30 30 round;

/* 老的 firefox */

-webkit-border-image:url(border.png) 30 30 round;

/* safari 和 chrome */

-o-border-image:url(border.png) 30 30 round;

/* opera */

新的邊框屬性屬性描述css

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

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

box-shadow向方框新增乙個或多個陰影。3

css 科技 邊框 CSS3 邊框

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

css 科技 邊框 CSS 邊框

邊框的寬度 為邊框指定寬度有兩種方法 可以指定長度值，比如 2px 或 0.1em 或者使用 3 個關鍵字之一，它們分別是 thin medium 預設值 和 thick。注釋 css 沒有定義 3 個關鍵字的具體寬度，所以乙個使用者 可能把 thin medium 和 thick 分別設定為等於 ...

css 科技 邊框 CSS 邊框

邊框的寬度 為邊框指定寬度有兩種方法 可以指定長度值，比如 2px 或 0.1em 或者使用 3 個關鍵字之一，它們分別是 thin medium 預設值 和 thick。注釋 css 沒有定義 3 個關鍵字的具體寬度，所以乙個使用者 可能把 thin medium 和 thick 分別設定為等於 ...