CSS3是Cascading Style Sheets第三代標(biāo)準(zhǔn)的簡(jiǎn)稱，是一種用于描述文檔外觀或顯示樣式的語(yǔ)言。傳統(tǒng)的CSS只能使用一些基本的樣式，而CSS3則提供了更多的高級(jí)應(yīng)用。下面我們來(lái)介紹一些CSS3的高級(jí)應(yīng)用。

1、過(guò)渡效果（transition）

button {
background-color: green;
transition: background-color 1s;
}
button:hover {
background-color: red;
}

當(dāng)鼠標(biāo)移動(dòng)到按鈕上時(shí)，會(huì)有一個(gè)從綠色到紅色的過(guò)渡效果。

2、動(dòng)畫效果（animation）

@keyframes mymove {
0% {top: 0px;}
50% {top: 100px;}
100% {top: 0px;}
}
div {
position: relative;
animation: mymove 5s infinite;
}

上述代碼實(shí)現(xiàn)了一個(gè)無(wú)限循環(huán)的動(dòng)畫效果，其中mymove是動(dòng)畫的名稱，top屬性分別在0%、50%和100%時(shí)變化。

3、伸縮框（flexbox）

.container {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
}

上述代碼實(shí)現(xiàn)了一個(gè)flexbox布局，讓.container里的.box元素均勻分布在中心位置。

4、盒模型（box-sizing）

div {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid black;
}

設(shè)置box-sizing為border-box后，padding和border不會(huì)再撐大元素的大小，而是在元素大小內(nèi)部進(jìn)行繪制。

5、字體圖標(biāo)（@font-face）

@font-face {
font-family: myfont;
src: url('myfont.ttf');
}
.icon {
font-family: myfont;
font-size: 20px;
content: '\e001';
}

通過(guò)@font-face定義了一個(gè)字體來(lái)源，然后通過(guò)content屬性設(shè)置字體圖標(biāo)。

以上是CSS3的一些高級(jí)應(yīng)用，我們可以通過(guò)這些應(yīng)用添加更多的樣式和交互效果，提升網(wǎng)站的用戶體驗(yàn)。