CSS是網頁開發中必不可少的一部分，它負責頁面的樣式與布局。在實際開發中，經常會用到一些小技巧來實現特定效果，今天就來分享一些常用的CSS小技巧，希望對開發者們有所幫助。 1. 讓字體平滑 pre { font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 如果你的字體看起來有鋸齒或發虛，可以嘗試添加這段代碼來讓它看起來更平滑。 2. 讓鼠標懸停時元素漸變 p { transition: color 0.2s ease-in-out; } p:hover { color: #ff8a65; } 當鼠標懸停在p標簽上時，顏色會漸變為橙色。 3. 用CSS生成三角形 pre { width: 0; height: 0; border-top: 10px solid transparent; border-right: 20px solid #333; border-bottom: 10px solid transparent; } 使用這個代碼塊可以生成一個向右的三角形。 4. 創建不同形狀的元素 pre { width: 100px; height: 100px; border-radius: 50%; } 這段代碼會將元素變成一個圓形。你還可以使用其他數值來創建其他形狀的元素。 5. 給元素添加陰影 pre { box-shadow: 2px 2px 2px #ccc; } 這段代碼可以給元素添加一個小的陰影，可以讓元素看起來更突出。 6. 制作漸變背景圖像 pre { background: linear-gradient(to right, #8e2de2, #4a00e0); } 這個代碼塊會將元素的背景色變成一個從左到右漸變色的背景圖像。 7. 將元素放在瀏覽器屏幕中央 pre { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 這段代碼可以讓元素始終在瀏覽器屏幕的中央，無論頁面滾動到哪兒去了。 8. 禁用文本選中 pre { user-select: none; } 這個代碼塊可以防止用戶選中頁面中的文本。如果你希望讓某個元素可選中，可以將該屬性設置為auto。 9. 創建一個漂亮的按鈕 pre { width: 200px; height: 50px; font-size: 16px; background-color: #4caf50; color: white; border-radius: 25px; border: none; cursor: pointer; outline: none; } pre:hover { background-color: #3e8e41; } 這段代碼可以快速創建一個漂亮的綠色按鈕，并在懸浮時變亮，有點擊效果。 10. 將元素放在其他元素上方 pre { position: relative; z-index: 999; } 如果你希望讓某個元素在其他元素上方顯示，這個代碼塊可以幫你實現。 這些小技巧可以幫助您更快地創建網站，并使您的代碼更具有可讀性和易維護性。希望這些技巧能對您有所幫助。