CSS3 新功能

1 CSS3 邊框
用CSS3，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計(jì)程序，如Photoshop。


2 CSS3 圓角
使用 CSS3 border-radius 屬性，你可以給任何元素制作 "圓角"。


3 CSS3 背景
CSS3中包含幾個(gè)新的背景屬性，提供更大背景元素控制。
background-size
background-origin
多重背景圖像


4 CSS3 漸變（Gradients）
CSS3 漸變（gradients）可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過(guò)渡。
以前，你必須使用圖像來(lái)實(shí)現(xiàn)這些效果。但是，通過(guò)使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在


放大時(shí)看起來(lái)效果更好，因?yàn)闈u變（gradient）是由瀏覽器生成的。
CSS3 定義了兩種類(lèi)型的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向
徑向漸變（Radial Gradients）- 由它們的中心定義


5 CSS3 文本效果
text-shadow
word-wrap


6 CSS3 字體
CSS3 @font-face 規(guī)則
以前CSS3的版本，網(wǎng)頁(yè)設(shè)計(jì)師不得不使用用戶計(jì)算機(jī)上已經(jīng)安裝的字體。
使用CSS3，網(wǎng)頁(yè)設(shè)計(jì)師可以使用他/她喜歡的任何字體。
當(dāng)你發(fā)現(xiàn)您要使用的字體文件時(shí)，只需簡(jiǎn)單的將字體文件包含在網(wǎng)站中，它會(huì)自動(dòng)下載給需要的用戶。
您所選擇的字體在新的CSS3版本有關(guān)于@font-face規(guī)則描述。
您"自己的"的字體是在 CSS3 @font-face 規(guī)則中定義的。


7 CSS3 2D 轉(zhuǎn)換
CSS3 轉(zhuǎn)換
CSS3轉(zhuǎn)換，我們可以移動(dòng)，比例化，反過(guò)來(lái)，旋轉(zhuǎn)，和拉伸元素。


8 CSS3 3D 轉(zhuǎn)換
3D Transforms
CSS3 允許您使用 3D 轉(zhuǎn)換來(lái)對(duì)元素進(jìn)行格式化。
一些 3D 轉(zhuǎn)換方法：
rotateX()
rotateY()


9 CSS3 過(guò)渡
CSS3中，我們?yōu)榱颂砑幽撤N效果可以從一種樣式轉(zhuǎn)變到另一個(gè)的時(shí)候，無(wú)需使用Flash動(dòng)畫(huà)或JavaScript。


10 CSS3 動(dòng)畫(huà)
CSS3，我們可以創(chuàng)建動(dòng)畫(huà)，它可以取代許多網(wǎng)頁(yè)動(dòng)畫(huà)圖像，Flash動(dòng)畫(huà)，和JAVAScripts。
CSS3 @keyframes 規(guī)則
@keyframes規(guī)則是創(chuàng)建動(dòng)畫(huà)。 @keyframes規(guī)則內(nèi)指定一個(gè)CSS樣式和動(dòng)畫(huà)將逐步從目前的樣式更改為新的樣式。


11 CSS3 多列
通過(guò) CSS3，您能夠創(chuàng)建多個(gè)列來(lái)對(duì)文本進(jìn)行布局 - 就像報(bào)紙那樣。
多列屬性：
column-count
column-gap
column-rule


12 CSS3 用戶界面
在 CSS3 中, 增加了一些新的用戶界面特性來(lái)調(diào)整元素尺寸，框尺寸和外邊框。
用戶界面屬性：
resize
box-sizing
outline-offset

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

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

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