在網(wǎng)頁(yè)設(shè)計(jì)中，CSS是一個(gè)很重要的部分。CSS3對(duì)于前端設(shè)計(jì)師來(lái)說(shuō)是必須要學(xué)習(xí)的一項(xiàng)技能。 下面將詳細(xì)介紹CSS3的一些最常用的特性。

CSS3選擇器

/* 選擇器：屬性選擇器 */
a[href^="https://"] {
color: #f00;
}
/* 選擇器：nth-child() */
div:nth-child(2n+1) {
background-color: #ccc;
}
/* 選擇器：偽類選擇器 */
a:hover {
color: #00f;
}

CSS3邊框

/* 邊框：圓角效果 */
div {
border-radius: 10px;
}
/* 邊框：透明度 */
div {
border: 2px solid rgba(255,255,255, 0.5);
}
/* 邊框：陰影 */
div {
box-shadow: 5px 5px 5px #ccc;
}

CSS3背景

/* 背景：線性漸變 */
div {
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}
/* 背景：徑向漸變 */
div {
background: radial-gradient(circle at top left, red, blue);
}
/* 背景：背景動(dòng)畫(huà) */
div {
background-image: url(img/bg.jpg);
animation: bgAnimation 10s ease-in-out infinite alternate;
}
@keyframes bgAnimation {
0% {opacity: 0.1;}
100% {opacity: 1;}
}

CSS3動(dòng)畫(huà)

/* 動(dòng)畫(huà)： 鼠標(biāo)懸停 */
div {
transition: all 0.5s ease;
}
div:hover {
transform: scale(1.2);
}
/* 動(dòng)畫(huà)：關(guān)鍵幀 */
div {
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}

CSS3字體圖標(biāo)

/* 字體圖標(biāo)：FontAwesome *//* 使用： */

以上內(nèi)容中只包含了最基本的CSS3特性。隨著技術(shù)的發(fā)展，CSS3的功能還將不斷地加強(qiáng)和擴(kuò)展。希望這篇筆記能夠幫助大家更好地掌握CSS3的基礎(chǔ)特性。