css3中新增的樣式使用示例附效果圖

發(fā)布時間：2014-08-19 14:59:58 作者：佚名

隨著平板和智能手機進入我們的生活，在手機版和平板版開發(fā)中我們就可以大膽的使用了css3，下面與大家一起探討下幾個常用的css3屬性

在PC版開發(fā)中由于IE原因，我們很少用到css3，但隨著平板和智能手機進入我們的生活，以及現(xiàn)在越來越流行，在手機版和平板版開發(fā)中我們就可以大膽的使用了，下面我們探討常用幾個css3屬性：

1.css3前綴使用介紹，我們直接看個例子：

復制代碼

代碼如下:

-webkit-transform:rotate(-3deg); // 給Chrome和Safari等webkit內(nèi)核的瀏覽器使用
-moz-transform:rotate(-3deg); // 給Firefox瀏覽器使用
-ms-transform:rotate(-3deg); // 給IE瀏覽器使用
-o-transform:rotate(-3deg); // 給Opera瀏覽器使用
transform:rotate(-3deg); // 給支持css3瀏覽器使用

2.在學習css3屬性時第一個肯定會想到圓角，因為css2中要切一張張小圖拼接還要大量css代碼控制還要考慮兼容很麻煩但是到css3后只要這個屬性”border-radius”就能實現(xiàn)圓角，來看一個簡單例子：

復制代碼

代碼如下:

border-radius:5px; //設置4個角且圓角半徑長度為5px;
border-top-left-radius:5px; //設置上左第一個角且圓角半徑長度為5px;其他使用我們可以參考手冊，用起來很簡單

3.簡單的陰影

讓我們從向你展示為網(wǎng)頁中的任意元素添加陰影效果是多么的簡單開始吧。下面的代碼片段將演示一個輕微旋轉(zhuǎn)并有陰影的圖片，這兩個效果都是使用CSS添加的。

復制代碼

代碼如下:

上面的代碼中，transform CSS 屬性實現(xiàn)圖片旋轉(zhuǎn)，box-shadow屬性為圖片添加陰影效果。你可以改變旋轉(zhuǎn)的角度，或者是陰影的參數(shù)，僅僅調(diào)整那些參數(shù)就OK了。

嘗試一下，你將看到下面演示的旋轉(zhuǎn)圖片效果。

box-shadow可以設置6個參數(shù)：
<length>①：第1個長度值用來設置對象的陰影水平偏移值?？梢詾樨撝?
<length>②：第2個長度值用來設置對象的陰影垂直偏移值。可以為負值
<length>③：如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
<length>④：如果提供了第4個長度值則用來設置對象的陰影外延值。不允許負值
<color>：設置對象的陰影的顏色。
inset：設置對象的陰影類型為內(nèi)陰影。該值為空時，則對象的陰影類型為外陰影

4.元素變換

剛才我們在陰影介紹中提到transform的使用，下面我們在來看一個例子，鼠標滑過圖片放大：

復制代碼

代碼如下:

<img src="megan.jpg" />
<style>
img { -webkit-transform: scale(0.5); }
img:hover { -webkit-transform: scale(1); }
</style>

鼠標滑過圖片，它就會彈出并變大，如下所示。

將鼠標從圖片上挪開，圖片又會恢復原狀。

我們來看一下transform各各參數(shù)意思：

復制代碼

代碼如下:

transform:translate(10px,10px) //該元素水平和垂直各移動10個像素
transform:rotate(10deg) //該元素旋轉(zhuǎn)10度
transform:scale(2) //該元素放大兩倍
transform:skew(10deg,10deg) //該元素對應X軸和Y軸斜切扭曲10度

下節(jié)我們一起探討動畫（transition）和漸變（gradient）的使用