CSS是網頁設計不可或缺的一部分，優秀的CSS元素可以讓頁面看起來更美觀、更易于閱讀和使用。以下是一些有用的CSS元素，它們可以幫助您創建優秀的網站。

/* 1. Grid布局 */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
/* 2. Flexbox布局 */
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
/* 3. 動畫效果 */
button {
transition: background-color 0.5s ease;
}
button:hover {
background-color: #ffa500;
}
/* 4. 文字效果 */
h1 {
text-transform: uppercase;
letter-spacing: 3px;
font-weight: bold;
}
/* 5. 陰影效果 */
.box {
box-shadow: 10px 10px 5px grey;
}
/* 6. 漸變背景 */
background: linear-gradient(to bottom, #ffecd2 0%, #fcb69f 100%);
/* 7. 自定義光標 */
a {
cursor: url("custom-cursor.png"), auto;
}
/* 8. 響應式設計 */
@media (max-width: 768px) {
.box {
width: 100%;
}
}
/* 9. 背景圖片定位 */
.background {
background: url("bg.jpg") no-repeat center center fixed;
background-size: cover;
}
/* 10. 主題切換 */
body {
--primary-color: #000;
}
.dark-mode {
--primary-color: #fff;
}

上述CSS元素只是眾多有用的CSS技巧的一小部分。熟練運用這些技巧可以使您的網站更加美觀、易于使用和更具創意。在學習和使用這些技巧時，請記得遵守最佳實踐，確保您的代碼易于維護和更新。