css3新增了哪些屬性樣式？ css3常用的新功能介紹

css3新增的屬性樣式（新功能）有哪些？本章就給大家重點介紹幾種css3中常用的新增屬性樣式（新特性）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

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

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

而CSS3 就是最新的 CSS 標準，比之新增加了一些屬性樣式，既新特性。下面我們來介紹css3中幾個常用的新功能（屬性樣式）：

一、邊框 

border-image屬性：是一個簡寫屬性， 用來設定所有border-image-* 屬性的簡寫屬性。 

border-radius屬性：是一個簡寫屬性，用來設定四個 border-*-radius 屬性。

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

   border-radius:;

   一個值表示 左上 右上 左下 右下 都是
   兩個值表示  第一個值左上右下 第二個值 右上左下         
   三個值表示  第一個 左上 第二個值右上左下 第三值 右下
   四個之 分別 左上 右上 右下 左下

   border-radius 0 0 0 0/ 0 0 0 0;

   前四個是四個x方向的x軸偏移後四個是y軸方向的偏移量

box-shadow屬性：在方框中新增一個或多個陰影。

 語法：box-shadow：值

 值說明：
 （1）第一個值 ：Npx  陰影向水平方向偏移N個像素  正數往右 負數往左
 （2）第二個值 ：Npx  陰影向垂直方向偏移N個像素  正數往下 負數往上
 （3）第三個值 ：羽化大小 （模糊的大小）
 （4）第四個值 ：陰影尺寸
 （5）第五個值 ：顏色 預設值是黑色
 （6）第六個參數： 內外陰影 預設是外陰影 內陰影是inset
 （7）陰影可以寫多個，中間用逗號隔開
（8）陰影可以簡寫，但要注意有一些值需要補0 

綜合例子：

p{
    border: 2px solid red;
    border-radius:25px; /* 创建圆角，100%为圆形 */
    box-shadow: 10px 10px 5px #888888；
}

二、背景

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

語法：background-size：值

值說明：

   （1）當只有一個值的情況下，寬度實現拉伸，並且高度會保持等比例，可以支持px，也可以支持百分比，百分比參照的是這個盒子本身的寬高
 （2）當有兩個值的情況下，寬度和高度會分別拉伸到對應的值，可能會變形，可以支持px，也可以支持百分比，百分比參照的是這個盒子本身的寬高
 （3）contain 當圖片的寬度或高度在縮放的時候有一個「碰到」了盒子的邊緣，則停止變化，（寬度或高度滿足一個即可）
 （4）保證在contain的基礎上不留白，這就是cover的效果（寬度和高度都需要滿足）

background-origin屬性：規定背景圖片的定位區域。 

語法：background-origin：值

值說明：

 （1）border-box  ：忽略邊框 直接從邊框的起始 0 ，0點平鋪
 （2）padding-box： 預設值，忽略padding 直接從padding的起始 0 ，0點平鋪
 （3）content-box ：從內容部分開始平鋪 跟padding有關係

background-image屬性：設定元素的背景圖片。

background-repeat屬性：設定是否及如何重複背景圖片。

三、文字效果

text-align-last屬性：設定如何對齊最後一行或緊鄰強制換行符之前的行。 

text-emphasis属性：向元素的文本应用重点标记以及重点标记的前景色。

text-justify属性：规定当 text-align，设置为“justify”时所使用的对齐方法。

text-outline属性：规定文本的轮廓。

text-overflow属性：规定当文本溢出包含元素时发生的事情。

text-shadow属性：向文本添加阴影。

text-wrap属性：规定文本的换行规则。

word-wrap属性：允许对长的不可分割的单词进行分割并换行到下一行。

四、颜色与透明度

rgba（）

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

RGBA可以用于所有使用颜色的地方
rgb三个值越小，颜色越黑
如果是纯色的背景，可以是使用rgba
如果是图片，可以脱离父子关系，让后用定位的方式来做。

hsla（）

H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度取值范围0~1

例：

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

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

以上是css3新增了哪些屬性樣式？ css3常用的新功能介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！