文章目錄

• • • • • 1. css3簡介
        • 2. css3邊框
        • • 2.1 邊框圓角
          • 2.2 邊框陰影
        • 3. css3背景
        • • 3.1背景圖大小
          • 3.2背景圖起始點
        • 4. css3文本效果
        • • 4.1 文本陰影
          • 4.2 文本換行
        • 5. css3字體圖標
        • 6. css32D轉換
        • 7. css3 3D轉換
        • 8. css3 transition
        • • 8.1 單項改變
          • 8.2 單項改多項改變
        • 9. css3 動畫

1. css3簡介

CSS 用于控制網頁的樣式和布局,CSS3 是最新的CSS標準,CSS3 完全向后兼容，因此您不必改變現有的設計。瀏覽器通常支持 CSS2,但是現在大部分瀏覽器也實現了css3的很多特性。

CSS3 被劃分為模塊。其中最重要的 CSS3 模塊包括：

• 選擇器
• 框模型
• 背景和邊框
• 文本效果
• 2D/3D 轉換
• 動畫
• 多列布局
• 用戶界面

2. css3邊框

2.1 邊框圓角

Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。

Firefox、Chrome 以及 Safari 支持所有新的邊框屬性。

border-radius(邊框圓角)語法如下：

border-radius:10px;代表四個方向都有一個微微的圓角

border-radius:50%;代表是正圓

2.2 邊框陰影

box-shadow（邊框陰影）語法如下：

div{box-shadow: 10px 10px 5px #888888; }

第一個值代表陰影的水平偏移量，第二個值代表陰影的垂直偏移量，第三個值代表陰影的模糊度，第四個值代表陰影的顏色

3. css3背景

3.1背景圖大小

background-size（背景圖大小）

background-size:100px 100px; 可以給具體的數值

background-size:50% 50%; 可以給百分百 相對于父元素來說

background-size:cover; 會拉伸圖片，填滿div

background-size:contain; 拉伸圖片的時候一個方向填滿了，另一個方向停止了

3.2背景圖起始點

background-origin這個屬性可以設置背景圖到底是以content、padding還是border為起點來放置背景圖

而且css3還允許一個div放置多張背景圖

4. css3文本效果

4.1 文本陰影

text-shadow是規定文本陰影的，第一個值是陰影的水平偏移量，第二個值是陰影的垂直偏移量，第三個值是模糊度，第四個值是陰影的顏色。

h1{ text-shadow: 5px 5px 5px #FF0000; }

4.2 文本換行

CSS3 自動換行

允許對長單詞進行拆分，并換行到下一行：

p {word-wrap:break-word;}

5. css3字體圖標

在 CSS3 之前，web 設計師必須使用已在用戶計算機上安裝好的字體。通過 CSS3，web 設計師可以使用他們喜歡的任意字體。

當您您找到或購買到希望使用的字體時，可將該字體文件存放到 web 服務器上，它會在需要時被自動下載到用戶的計算機上。

先定義自己的字體名稱然后使用自己定義的字體

<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}</style>

當然我們一般使用阿里巴巴矢量圖標庫引用字體文件比較多，前面已經講過，這里不贅述。

6. css32D轉換

通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。

語法如下：

translate()

div{transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */-o-transform: translate(50px,100px); /* Opera */-moz-transform: translate(50px,100px); /* Firefox */}

rotate()

div{transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */}

scale()

div{transform: scale(2,4);-ms-transform: scale(2,4); /* IE 9 */-webkit-transform: scale(2,4); /* Safari 和 Chrome */-o-transform: scale(2,4); /* Opera */-moz-transform: scale(2,4); /* Firefox */}

skew()

div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */}

7. css3 3D轉換

8. css3 transition

8.1 單項改變

div{ transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }

8.2 單項改多項改變

div{transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;}

9. css3 動畫

語法如下： @keyframes myfirst { from {background: red;} to {background: yellow;} }@-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {background: yellow;} }@-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} }@-o-keyframes myfirst /* Opera */ { from {background: red;} to {background: yellow;} }

總結

以上是生活随笔為你收集整理的三分钟带你掌握 CSS3 的新属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。