CSS3是前端開(kāi)發(fā)中常用的技術(shù)之一，它可以使網(wǎng)頁(yè)效果更加豐富、華麗。本文就簡(jiǎn)單介紹一下CSS3中常用的效果圖。

.box {
border-radius: 10px; /*實(shí)現(xiàn)圓角效果*/
box-shadow: 5px 5px 5px #888888; /*實(shí)現(xiàn)陰影效果*/
transition: all 0.3s ease; /*實(shí)現(xiàn)過(guò)渡效果*/
transform: rotate(30deg); /*實(shí)現(xiàn)旋轉(zhuǎn)效果*/
}

在以上代碼中，我們使用了四個(gè)常見(jiàn)的CSS3效果。首先，border-radius屬性可以實(shí)現(xiàn)圓角效果，其值為圓角的半徑大小。其次，box-shadow屬性可以實(shí)現(xiàn)陰影效果，其值為陰影的偏移距離、擴(kuò)散半徑和顏色。再便是transition屬性可以實(shí)現(xiàn)過(guò)渡效果，其值為過(guò)渡時(shí)間、過(guò)渡方式和需要發(fā)生效果的屬性名。最后，transform屬性可以實(shí)現(xiàn)旋轉(zhuǎn)效果，其值為旋轉(zhuǎn)的角度。

.btn {
background-color: #ff69b4; /*背景色*/
color: #ffffff; /*字體顏色*/
border: none; /*取消邊框*/
padding: 10px 20px; /*增加內(nèi)邊距*/
cursor: pointer; /*改變鼠標(biāo)樣式*/
}
.btn:hover {
background-color: #c71585; /*鼠標(biāo)懸停樣式*/
}
.btn:active {
background-color: #dc143c; /*鼠標(biāo)按下樣式*/
}

在以上代碼中，我們創(chuàng)建了一個(gè)按鈕樣式。首先，background-color屬性可以實(shí)現(xiàn)背景色，其值為顏色代碼或顏色名稱(chēng)。其次，color屬性可以實(shí)現(xiàn)字體顏色，其值也為顏色代碼或顏色名稱(chēng)。border和padding屬性也是常見(jiàn)的設(shè)置樣式屬性。最后，cursor屬性可以改變鼠標(biāo)樣式，其值為default（默認(rèn)）等等鼠標(biāo)樣式名稱(chēng)。同時(shí)，我們還在:hover偽類(lèi)和:active偽類(lèi)中實(shí)現(xiàn)鼠標(biāo)懸停樣式和鼠標(biāo)按下樣式。

以上就是CSS3常用效果圖的簡(jiǎn)單介紹。當(dāng)然，CSS3還有很多其他的效果，學(xué)習(xí)和使用它們可以為我們的開(kāi)發(fā)工作帶來(lái)更多的樂(lè)趣。