在介紹css3新增的屬性樣式（新特性）前，我們要先知道什么是css3。

CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡(jiǎn)稱。
CSS 是一種標(biāo)記語言，屬于瀏覽器解釋型語言，可以直接由瀏覽器執(zhí)行，不需要編譯。
CSS 是用來表現(xiàn)HTML或XML的標(biāo)記語言。
CSS 是由W3C的CSS工作組發(fā)布推薦和維護(hù)的.
CSS 是編程入門人員的必修課，運(yùn)用CSS樣式可以讓頁面變得美觀。
CSS語法由三部分構(gòu)成：選擇器、屬性和值，例： selector {property: value}。

而CSS3 就是最新的 CSS 標(biāo)準(zhǔn)，比之新增加了一些屬性樣式，既新特性。下面我們來介紹css3中幾種常用的新特性（屬性樣式）：

一、邊框

border-image屬性：是一個(gè)簡(jiǎn)寫屬性， 用于設(shè)置所有 border-image-* 屬性的簡(jiǎn)寫屬性。

border-radius屬性：是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置四個(gè) border-*-radius 屬性。

border-top-left-radius 設(shè)置左上角
border-top-right-radius 設(shè)置右上角
border-bottom-right-radius 設(shè)置左下角
border-bottom-right-radius 設(shè)置右下角
border-top-left-radius ： x y ; x代表左上角x軸偏移量 ，y代表y軸偏移量，可以設(shè)置百分比以及像素。

border-radius:;
一個(gè)值表示 左上 右上 左下 右下 都是
兩個(gè)值表示 第一個(gè)值左上右下 第二個(gè)值 右上左下
三個(gè)值表示 第一個(gè) 左上 第二個(gè)值右上左下 第三值 右下
四個(gè)之 分別 左上 右上 右下 左下

border-radius 0 0 0 0/ 0 0 0 0；
前四個(gè)是四個(gè)x方向的x軸偏移 后四個(gè)是y軸方向的偏移

box-shadow屬性：向方框添加一個(gè)或多個(gè)陰影。

語法：box-shadow：值
值說明：
（1）第一個(gè)值 ：Npx 陰影向水平方向偏移N個(gè)像素 正數(shù)往右 負(fù)數(shù)往左
（2）第二個(gè)值 ：Npx 陰影向垂直方向偏移N個(gè)像素 正數(shù)往下 負(fù)數(shù)往上
（3）第三個(gè)值 ：羽化大小 （模糊的大小）
（4）第四個(gè)值 ：陰影尺寸
（5）第五個(gè)值 ：顏色 默認(rèn)值是黑色
（6）第六個(gè)參數(shù)： 內(nèi)外陰影 默認(rèn)是外陰影 內(nèi)陰影是inset
（7）陰影可以寫多個(gè)，中間用逗號(hào)隔開
（8）陰影可以簡(jiǎn)寫，但是需要注意有一些值需要補(bǔ)0

綜合例子：

p{
    border: 2px solid red;
    border-radius:25px; /* 創(chuàng)建圓角，100%為圓形 */
    box-shadow: 10px 10px 5px #888888；
}

二、背景

background-size屬性：規(guī)定背景圖片的尺寸。（重要屬性）

語法：background-size：值

值說明：
（1）當(dāng)只有一個(gè)值的情況下，寬度實(shí)現(xiàn)拉伸，并且高度會(huì)保持等比例，可以支持px，也可以支持百分比，百分比參照的是這個(gè)盒子本身的寬高
（2）當(dāng)有兩個(gè)值的情況下，寬度和高度會(huì)分別拉伸到對(duì)應(yīng)的值，可能會(huì)變形，可以支持px，也可以支持百分比，百分比參照的是這個(gè)盒子本身的寬高
（3）contain 當(dāng)圖片的寬度或者是高度在縮放的時(shí)候有一個(gè)“碰到”了盒子的邊緣，則停止變化，（寬度或高度滿足一個(gè)即可）
（4）在contain的基礎(chǔ)上保證不留白，這就是cover的效果（寬度和高度都需要滿足）

background-origin屬性：規(guī)定背景圖片的定位區(qū)域。

語法：background-origin：值

值說明：
（1）border-box ：忽略邊框 直接從邊框的起始 0 ，0點(diǎn)平鋪
（2）padding-box： 默認(rèn)值，忽略padding 直接從padding的起始 0 ，0點(diǎn)平鋪
（3）content-box ：從內(nèi)容部分開始平鋪 跟padding有關(guān)系

background-image屬性：設(shè)置元素的背景圖像。

background-repeat屬性：設(shè)置是否及如何重復(fù)背景圖像。

三、文本效果

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ī)定文本的輪廓。

text-overflow屬性：規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。

text-shadow屬性：向文本添加陰影。

text-wrap屬性：規(guī)定文本的換行規(guī)則。

word-wrap屬性：允許對(duì)長(zhǎng)的不可分割的單詞進(jìn)行分割并換行到下一行。

四、顏色與透明度

rgba（）

R:Red、G:Green、B:Blue、A:Alpha，R、G、B 取值范圍0~255，A的取值范圍是0-1。

RGBA可以用于所有使用顏色的地方
rgb三個(gè)值越小，顏色越黑
如果是純色的背景，可以是使用rgba
如果是圖片，可以脫離父子關(guān)系，讓后用定位的方式來做。

hsla（）

H 色調(diào) 取值范圍0~360，0/360表示紅色、120表示綠色、240表示藍(lán)色
S 飽和度取值范圍0%~100%
L 亮度 取值范圍0%~100%
A 透明度取值范圍0~1

例：

background-color: hsla(120,100%,50%,1);

總結(jié)：以上就是本篇文的全部?jī)?nèi)容，希望能對(duì)大家的學(xué)習(xí)有所幫助。

以上就是css3新增了哪些屬性樣式？css3常用的新特性介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！