小編給大家分享一下css3中新增了的屬性樣式是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創新互聯專注為客戶提供全方位的互聯網綜合服務，包含不限于成都網站制作、做網站、外貿營銷網站建設、羅甸網絡推廣、重慶小程序開發、羅甸網絡營銷、羅甸企業策劃、羅甸品牌公關、搜索引擎seo、人物專訪、企業宣傳片、企業代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創新互聯為所有大學生創業者提供羅甸建站搭建服務，24小時服務熱線：028-86922220，官方網址：www.2m8n56k.cn

在介紹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  設置左下角        
  border-bottom-right-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）第三個值 ：羽化大小 （模糊的大?。?br/>  （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中新增了的屬性樣式是什么
文章位置：http://www.2m8n56k.cn/article6/jphsog.html

成都網站建設公司_創新互聯，為您提供企業建站、虛擬主機、網站內鏈、移動網站建設、App開發、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯