在前端開發中，CSS是非常重要的一部分。它可以用來美化網頁，制造動態效果。下面我們將介紹一些常見的CSS效果。

p {
font-size: 18px;
color: #333;
}
pre {
background-color: #f5f5f5;
padding: 10px;
border-radius: 5px;
}

1.背景顏色效果

.background {
background-color: #ccc;
}

2.文本樣式效果

.text {
font-size: 20px;
color: red;
font-weight: bold;
text-decoration: underline;
}

3.圓角效果

.radius {
border-radius: 10px;
}

4.陰影效果

.shadow {
box-shadow: 5px 5px 5px #ccc;
}

5.過渡效果

.transition {
transition: all .5s ease;
}
.transition:hover {
transform: scale(1.1);
}

6.漸變效果

.gradient {
background: linear-gradient(to bottom, #e2e2e2, #fff);
}

總結

這些是前端開發中比較常見的CSS效果。它們可以幫助你快速地美化網頁，為用戶帶來更好的體驗。