< p >CSS3全套教程< /p >< p >CSS3是CSS的最新版本，為網頁設計師和開發人員提供了豐富的新功能和特性。在本教程中，我們將學習CSS3的所有特性和用法。< /p >< p >1.選擇器< /p >< pre >/* 選擇所有< p >元素 */ p { } /* 根據class選擇元素 */ .element { } /* 根據ID選擇元素 */ #element { } /* 選擇第一個< p >元素 */ p:first-child { } /* 選擇最后一個< p >元素 */ p:last-child { } /* 選擇所有偶數子元素 */ p:nth-child(even) { } /* 選擇所有奇數子元素 */ p:nth-child(odd) { } /* 根據屬性選擇元素 */ input[type="text"] { }< /pre >< p >2.盒子模型< /p >< pre >/* 修改元素的寬和高 */ element { width: 300px; height: 200px; } /* 修改元素內邊距 */ element { padding: 10px; } /* 修改元素邊框樣式 */ element { border: 1px solid #333; } /* 修改元素外邊距 */ element { margin: 20px; } /* 添加陰影 */ element { box-shadow: 10px 10px 5px #888888; }< /pre >< p >3.文本效果< /p >< pre >/* 文本顏色 */ element { color: #333; } /* 文本大小 */ element { font-size: 24px; } /* 文本對齊方式 */ element { text-align: center; } /* 文本裝飾 */ element { text-decoration: underline; } /* 字體粗細 */ element { font-weight: bold; } /* 斜體 */ element { font-style: italic; }< /pre >< p >4.漸變和背景圖像< /p >< pre >/* 添加漸變 */ element { background: linear-gradient(to bottom, #FFFFFF, #000000); } /* 設置背景圖像 */ element { background-image: url('image.jpg'); } /* 平鋪背景圖像 */ element { background-repeat: repeat; } /* 調整背景圖像位置 */ element { background-position: center; }< /pre >< p >5.動畫和過渡< /p >< pre >/* 添加動畫 */ element { animation: slide 2s ease-in-out; } /* 添加過渡 */ element { transition: all 0.5s ease-in-out; }< /pre >< p >以上是CSS3的主要特性和用法，希望本文能夠對你有所幫助。< /p >