文章目錄

• • • • • 1. css3簡(jiǎn)介
        • 2. css3邊框
        • • 2.1 邊框圓角
          • 2.2 邊框陰影
        • 3. css3背景
        • • 3.1背景圖大小
          • 3.2背景圖起始點(diǎn)
        • 4. css3文本效果
        • • 4.1 文本陰影
          • 4.2 文本換行
        • 5. css3字體圖標(biāo)
        • 6. css32D轉(zhuǎn)換
        • 7. css3 3D轉(zhuǎn)換
        • 8. css3 transition
        • • 8.1 單項(xiàng)改變
          • 8.2 單項(xiàng)改多項(xiàng)改變
        • 9. css3 動(dòng)畫

1. css3簡(jiǎn)介

CSS 用于控制網(wǎng)頁(yè)的樣式和布局,CSS3 是最新的CSS標(biāo)準(zhǔn),CSS3 完全向后兼容，因此您不必改變現(xiàn)有的設(shè)計(jì)。瀏覽器通常支持 CSS2,但是現(xiàn)在大部分瀏覽器也實(shí)現(xiàn)了css3的很多特性。

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

• 選擇器
• 框模型
• 背景和邊框
• 文本效果
• 2D/3D 轉(zhuǎn)換
• 動(dòng)畫
• 多列布局
• 用戶界面

2. css3邊框

2.1 邊框圓角

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

Firefox、Chrome 以及 Safari 支持所有新的邊框?qū)傩浴?/p>

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

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

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

2.2 邊框陰影

box-shadow（邊框陰影）語(yǔ)法如下：

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

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

3. css3背景

3.1背景圖大小

background-size（背景圖大小）

background-size:100px 100px; 可以給具體的數(shù)值

background-size:50% 50%; 可以給百分百 相對(duì)于父元素來(lái)說(shuō)

background-size:cover; 會(huì)拉伸圖片，填滿div

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

3.2背景圖起始點(diǎn)

background-origin這個(gè)屬性可以設(shè)置背景圖到底是以content、padding還是border為起點(diǎn)來(lái)放置背景圖

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

4. css3文本效果

4.1 文本陰影

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

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

4.2 文本換行

CSS3 自動(dòng)換行

允許對(duì)長(zhǎng)單詞進(jìn)行拆分，并換行到下一行：

p {word-wrap:break-word;}

5. css3字體圖標(biāo)

在 CSS3 之前，web 設(shè)計(jì)師必須使用已在用戶計(jì)算機(jī)上安裝好的字體。通過(guò) CSS3，web 設(shè)計(jì)師可以使用他們喜歡的任意字體。

當(dāng)您您找到或購(gòu)買到希望使用的字體時(shí)，可將該字體文件存放到 web 服務(wù)器上，它會(huì)在需要時(shí)被自動(dòng)下載到用戶的計(jì)算機(jī)上。

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

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

當(dāng)然我們一般使用阿里巴巴矢量圖標(biāo)庫(kù)引用字體文件比較多，前面已經(jīng)講過(guò)，這里不贅述。

6. css32D轉(zhuǎn)換

通過(guò) CSS3 轉(zhuǎn)換，我們能夠?qū)υ剡M(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸。

語(yǔ)法如下：

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轉(zhuǎn)換

8. css3 transition

8.1 單項(xiàng)改變

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

8.2 單項(xiàng)改多項(xiàng)改變

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 動(dòng)畫

語(yǔ)法如下： @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;} }

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。