CSS3是一種用于網站設計的樣式語言，在網頁設計中起到控制網頁外觀和布局的作用。學習CSS3需要掌握基礎語法、選擇器、顏色和背景、文本效果、變形和過渡以及動畫和響應式布局等知識。

/*CSS3基本語法*/
selector {
property: value;
}
/*CSS3選擇器*/
element {
/*屬性選擇器*/
attribute="value" {}
/*偽類選擇器*/
:hover {}
/*偽元素選擇器*/
::before {}
/*組合選擇器*/
element1 element2 {}
/*兄弟選擇器*/
element1 ~ element2 {}
/*子選擇器*/
element1 >element2 {}
}
/*CSS3顏色和背景*/
body {
/*顏色*/
color: #333333;
/*背景*/
background-color: #ffffff;
/*背景圖片*/
background-image: url(../images/background.png);
}
/*CSS3文本效果*/
h1 {
/*字體*/
font-family: Arial, sans-serif;
/*大小*/
font-size: 24px;
/*加粗*/
font-weight: bold;
/*下劃線*/
text-decoration: underline;
/*文字陰影*/
text-shadow: 1px 1px #cccccc;
}
/*CSS3變形和過渡*/
div {
/*旋轉*/
transform: rotate(30deg);
/*縮放*/
transform: scale(1.5);
/*位移*/
transform: translate(100px, 50px);
/*過渡*/
transition: all 2s ease-in-out;
}
/*CSS3動畫*/
@keyframes my-animation {
from {
opacity: 0;
}
to {
opacity: 1;
transform: rotate(360deg);
}
}
div {
/*動畫名稱*/
animation-name: my-animation;
/*動畫時間*/
animation-duration: 2s;
/*動畫次數*/
animation-iteration-count: infinite;
/*動畫方向*/
animation-direction: alternate;
/*動畫曲線*/
animation-timing-function: ease-in-out;
}
/*CSS3響應式布局*/
@media screen and (max-width: 768px) {
/*移動端樣式*/
body {
font-size: 16px;
}
}

掌握CSS3基本語法和選擇器后，學習顏色和背景、文本效果、變形和過渡以及動畫和響應式布局等進階知識，可以打造更加炫酷的網頁效果。