CSS3邊框?qū)傩詫?shí)例分析

這篇文章主要介紹“CSS3邊框?qū)傩詫?shí)例分析”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“CSS3邊框?qū)傩詫?shí)例分析”文章能幫助大家解決問題。

學(xué)習(xí)CSS3之前呢，我們一定要知道瀏覽器的兼容性，這一點(diǎn)是非常重要的，對(duì)CSS3是沒有一個(gè)W3C標(biāo)準(zhǔn)的，但是全部主流的服務(wù)器已經(jīng)全部支持許多新功能，幾乎所有的CSS3屬性都支持IE8以上、前綴-moz-的火狐瀏覽器、前綴-webkit-的Google Chrome瀏覽器、前綴-webkit-的Safari瀏覽器、Opera12.1以上的瀏覽器，所以基本上在兼容性這方面不存太大的問題。不過大家寫完以后為避免出現(xiàn)問題一定要測(cè)試哦。

接下我我們從基本的一些CSS3屬性開始學(xué)起

在這里呢，我們主要學(xué)習(xí)三個(gè)邊框?qū)傩裕?/p>

1、CSS3圓角

在CSS3中，我們很容易創(chuàng)建圓角，用 border-radius 就可以創(chuàng)建，值可以是像素（px），也可以是百分比（%），也可單獨(dú)給某個(gè)角添加，例如：

2、CSS3盒陰影

CSS3中用 box-shadow 屬性被用來添加陰影，在平時(shí)的開發(fā)中此效果也是經(jīng)常的用，包括單邊陰影，多邊陰影等。例如：

3、CSS3邊界圖片

我們可以用 border-image 屬性用圖像創(chuàng)建一個(gè)邊框，讓我們的邊框更加形色多姿，例如：

使用 CSS3 border-radius 屬性，你可以給任何元素制作 "圓角"?？赏瑫r(shí)設(shè)置，例如：

還可以創(chuàng)建橢圓邊角，例如：

CSS3包含了幾個(gè)新的背景屬性，提供了更大背景元素控制，如下：

我們可以通過 background-image 來添加背景圖片，不同的背景圖像和圖像用逗號(hào)隔開，所有的圖片中顯示在最頂端的為第一張。

然后給不同的圖片設(shè)置多個(gè)不同的屬性。例如：

background-size指定背景圖像的大小。

background-repeat指定圖片重復(fù)填充還是不重復(fù)填充

background-Origin屬性指定了背景圖像的位置區(qū)域

background-clip背景剪裁屬性是從指定位置開始繪制。

例如：

其中，background-Origin屬性、background-clip屬性的值有content-box, padding-box,和 border-box，例如下圖中那么存放或剪裁：

CSS3 漸變（gradients）可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過渡。它定義了兩種類型的漸變：

1、線性漸變

為了創(chuàng)建一個(gè)線性漸變，你必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時(shí)，你也可以設(shè)置一個(gè)起點(diǎn)和一個(gè)方向（或一個(gè)角度）。例如，下面是一個(gè)從上到下的線性漸變：

同時(shí)，你也可以嘗試這線性漸變 - 從左到右，線性漸變 - 對(duì)角，例如：

下面的實(shí)例演示了如何創(chuàng)建一個(gè)帶有彩虹顏色和文本的線性漸變：

使用透明度（transparent），例如：

重復(fù)的線性漸變，例如：

2、徑向漸變

徑向漸變由它的中心定義。

為了創(chuàng)建一個(gè)徑向漸變，你也必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時(shí)，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認(rèn)情況下，漸變的中心是 center（表示在中心點(diǎn)），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠(yuǎn)的角落）。

例如,設(shè)置形狀為圓形的徑向漸變：

shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認(rèn)值是 ellipse。

size 參數(shù)定義了漸變的大小。它可以是以下四個(gè)值：

3、重復(fù)的徑向漸變

repeating-radial-gradient() 函數(shù)用于重復(fù)徑向漸變。

例如：

在這呢，我主要說明下面幾個(gè)文本屬性：

1、CSS3文本陰影

也是由四個(gè)屬性值完成的，指定了水平陰影、垂直陰影、模糊的距離、以及陰影的顏色。例如：

2、CSS3 Text Overflow屬性

這個(gè)屬性用的也是比較多的，主要限制溢出的內(nèi)容，不過的配合其它屬性使用。

3、CSS3的換行

CSS3 單詞拆分換行屬性指定換行規(guī)則：

注意: word-break 屬性不兼容 Opera.

4、新文本屬性

hanging-punctuation：規(guī)定標(biāo)點(diǎn)字符是否位于線框之外。

punctuation-trim：規(guī)定是否對(duì)標(biāo)點(diǎn)字符進(jìn)行修剪。

text-align-last：設(shè)置如何對(duì)齊最后一行或緊挨著強(qiáng)制換行符之前的行。

text-emphasis：向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。

text-justify：規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時(shí)所使用的對(duì)齊方法。

text-outline：規(guī)定文本的輪廓。

使用 CSS3，網(wǎng)頁設(shè)計(jì)師可以使用他/她喜歡的任何字體。當(dāng)你發(fā)現(xiàn)您要使用的字體文件時(shí)，只需簡(jiǎn)單的將字體文件包含在網(wǎng)站中，它會(huì)自動(dòng)下載給需要的用戶。

關(guān)于“CSS3邊框?qū)傩詫?shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。