CSS3新增的屬性有哪些:

CSS 用於控制網頁的樣式和佈局。函數

CSS3 是最新的 CSS 標準。佈局

CSS3新增了不少的屬性,下面一塊兒來分析一下新增的一些屬性:學習

  1.CSS3邊框:動畫

  • border-radius:CSS3圓角邊框。在 CSS2 中添加圓角矩形須要技巧,咱們必須爲每一個圓角使用不一樣的圖片,在 CSS3 中,建立圓角是很是容易的,在 CSS3 中,border-radius 屬性用於建立圓角。border:2px solid;
  • box-shadow:CSS3邊框陰影。在 CSS3 中,box-shadow 用於向方框添加陰影。box-shadow:10px 10px 5px #888888;
  • border-image:CSS3邊框圖片。經過 CSS3 的 border-image 屬性,您可使用圖片來建立邊框。border-image:url(border.png) 30 30 round;

  2.CSS3背景:url

  • background-size: 屬性規定背景圖片的尺寸。在 CSS3 以前,背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中,能夠規定背景圖片的尺寸,這就容許咱們在不一樣的環境中重複使用背景圖片。您可以以像素或百分比規定尺寸。若是以百分比規定尺寸,那麼尺寸相對於父元素的寬度和高度。
  • background-origin :屬性規定背景圖片的定位區域。背景圖片能夠放置於 content-box、padding-box 或 border-box 區域。

  3.CSS3文字效果:spa

  • text-shadow:在 CSS3 中,text-shadow 可向文本應用陰影。text-shadow:5px 5px 5px #FFFFFF;
  • word-wrap :單詞太長的話就可能沒法超出某個區域,容許對長單詞進行拆分,並換行到下一行:p{word-wrap:break-word;}

  4.CSS3 2D轉換:orm

  transform:經過 CSS3 轉換,咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。圖片

  • translate():元素從其當前位置移動,根據給定的 left(x 座標) 和 top(y 座標) 位置參數:transform:translate(50px,100px);值 translate(50px,100px) 把元素從左側移動 50 像素,從頂端移動 100 像素。
  • rotate():元素順時針旋轉給定的角度。容許負值,元素將逆時針旋轉。transform:rotate(30deg);值 rotate(30deg) 把元素順時針旋轉 30 度。
  • scale():元素的尺寸會增長或減小,根據給定的寬度(X 軸)和高度(Y 軸)參數:transform:scale(2,4);值 scale(2,4) 把寬度轉換爲原始尺寸的 2 倍,把高度轉換爲原始高度的 4 倍。
  • skew():元素轉動給定的角度,根據給定的水平線(X 軸)和垂直線(Y 軸)參數:transform:skew(30deg,20deg);值 skew(30deg,20deg) 圍繞 X 軸把元素轉動 30 度,圍繞 Y 軸轉動 20 度。
  • matrix() :

    matrix() 方法把全部 2D 轉換方法組合在一塊兒。ip

    matrix() 方法須要六個參數,包含數學函數,容許您:旋轉、縮放、移動以及傾斜元素。數學

  5.CSS3 3D轉換:

  • rotateX():元素圍繞其 X 軸以給定的度數進行旋轉。transform:rotateX(120deg);
  • rotateY():元素圍繞其 Y 軸以給定的度數進行旋轉。transform:rotateY(120deg);

  6.CSS3 過渡:當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。

  7.CSS3動畫:經過 CSS3,咱們可以建立動畫,這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

  8.CSS3多列:

  • column-count:屬性規定元素應該被分隔的列數。
  • column-gap:屬性規定列之間的間隔。
  • column-rule :屬性設置列之間的寬度、樣式和顏色規則。

  9.CSS3用戶界面:

  • resize:屬性規定是否可由用戶調整元素尺寸。
  • box-sizing:屬性容許您以確切的方式定義適應某個區域的具體內容。
  • outline-offset :屬性對輪廓進行偏移,並在超出邊框邊緣的位置繪製輪廓。

 以上呢,就是我對CSS3新增的一些屬性的瞭解,但願對學習的你們有所幫助。

相關文章
相關標籤/搜索