今天小編給大家分享一下CSS3新增了哪些屬性的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

革吉網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),革吉網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為革吉上1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的革吉做網(wǎng)站的公司定做！

1.CSS3邊框：

• border-radius：CSS3圓角邊框。在 CSS2 中添加圓角矩形需要技巧，我們必須為每個(gè)圓角使用不同的圖片，在 CSS3 中，創(chuàng)建圓角是非常容易的，在 CSS3 中，border-radius 屬性用于創(chuàng)建圓角。border：2px solid;

• box-shadow：CSS3邊框陰影。在 CSS3 中，box-shadow 用于向方框添加陰影。box-shadow:10px 10px 5px #888888;

• border-image：CSS3邊框圖片。通過 CSS3 的 border-image 屬性，您可以使用圖片來創(chuàng)建邊框。border-image：url(border.png) 30 30 round;

2.CSS3背景：

• background-size： 屬性規(guī)定背景圖片的尺寸。在 CSS3 之前，背景圖片的尺寸是由圖片的實(shí)際尺寸決定的。在 CSS3 中，可以規(guī)定背景圖片的尺寸，這就允許我們?cè)诓煌沫h(huán)境中重復(fù)使用背景圖片。您能夠以像素或百分比規(guī)定尺寸。如果以百分比規(guī)定尺寸，那么尺寸相對(duì)于父元素的寬度和高度。

• background-origin ：屬性規(guī)定背景圖片的定位區(qū)域。背景圖片可以放置于 content-box、padding-box 或 border-box 區(qū)域。

3.CSS3文字效果：

• text-shadow：在 CSS3 中，text-shadow 可向文本應(yīng)用陰影。text-shadow:5px 5px 5px #FFFFFF;

• word-wrap :單詞太長(zhǎng)的話就可能無法超出某個(gè)區(qū)域，允許對(duì)長(zhǎng)單詞進(jìn)行拆分，并換行到下一行：p{word-wrap:break-word;}

4.CSS3 2D轉(zhuǎn)換：

transform：通過 CSS3 轉(zhuǎn)換，我們能夠?qū)υ剡M(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸。

• translate()：元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)：transform：translate（50px,100px）;值 translate(50px,100px) 把元素從左側(cè)移動(dòng) 50 像素，從頂端移動(dòng) 100 像素。

• rotate()：元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。transform:rotate(30deg);值 rotate(30deg) 把元素順時(shí)針旋轉(zhuǎn) 30 度。

• scale():元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)：transform:scale(2,4);值 scale(2,4) 把寬度轉(zhuǎn)換為原始尺寸的 2 倍，把高度轉(zhuǎn)換為原始高度的 4 倍。

• skew():元素轉(zhuǎn)動(dòng)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)：transform:skew(30deg,20deg);值 skew(30deg,20deg) 圍繞 X 軸把元素轉(zhuǎn)動(dòng) 30 度，圍繞 Y 軸轉(zhuǎn)動(dòng) 20 度。

• matrix() :

• matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。

• matrix() 方法需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動(dòng)以及傾斜元素。

5.CSS3 3D轉(zhuǎn)換：

• rotateX()：元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform：rotateX(120deg);

• rotateY()：元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform：rotateY(120deg);

6.CSS3 過渡：當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。

7.CSS3動(dòng)畫：通過 CSS3，我們能夠創(chuàng)建動(dòng)畫，這可以在許多網(wǎng)頁中取代動(dòng)畫圖片、Flash 動(dòng)畫以及 JavaScript。

8.CSS3多列：

• column-count：屬性規(guī)定元素應(yīng)該被分隔的列數(shù)。

• column-gap：屬性規(guī)定列之間的間隔。

• column-rule ：屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則。

9.CSS3用戶界面：

• resize：屬性規(guī)定是否可由用戶調(diào)整元素尺寸。

• box-sizing：屬性允許您以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容。

• outline-offset ：屬性對(duì)輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。

以上就是“CSS3新增了哪些屬性”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。