CSS是前端開發(fā)中必不可少的技術，而Demo是學習CSS的好方法。Demo是指演示性的示例，通過Demo，我們可以看到CSS代碼如何實現各種效果。下面將介紹一些常見的CSS Demo。

// 邊框動畫
.box {
border: 1px solid black;
animation: borderAnim 2s ease-in-out infinite alternate;
}
@keyframes borderAnim {
from {
border-color: blue;
}
to {
border-color: red;
}
}
// 懸停效果
.btn {
color: white;
background-color: blue;
padding: 10px 20px;
transition: background-color 0.5s ease-in-out;
}
.btn:hover {
background-color: red;
}
// 陰影效果
.shadow {
box-shadow: 5px 5px 5px #888888;
}
// 文字漸變效果
.text-gradient {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
// 旋轉效果
.rotate {
transform: rotate(45deg);
}

以上是常見的CSS Demo，它們展示了CSS的不同技巧和效果。當然，這些Demo只是冰山一角，還有許多更加復雜的Demo可以挖掘。通過模仿、學習這些Demo，我們可以更好地掌握CSS。