在网页设计中，CSS是一个非常重要的组成部分。它可以让网站外观更加美观，同时也可以提高用户的体验。下面列出了五个常用的CSS效果，帮助你更好地理解和应用CSS。
1. 阴影效果
阴影效果可以使元素看起来更加立体，从而增强网页的视觉效果。通过box-shadow属性可以实现阴影效果，例如：
.box {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
其中，2px表示偏移量，2px表示模糊半径，10px表示阴影尺寸，rgba(0, 0, 0, 0.2)表示颜色和透明度。
2. 渐变效果
渐变效果可以使元素呈现出丰富的颜色变化效果，通过linear-gradient属性可以实现渐变效果，例如：
.box {
background: linear-gradient(to right, #FFDB58, #FFA500);
}
其中，to right表示从左到右的渐变方向，#FFDB58和#FFA500表示渐变的起始颜色和终止颜色。
3. 动画效果
动画效果可以吸引用户的注意力，使网页看起来更加生动有趣。通过animation属性可以实现动画效果，例如：
.box {
animation: move 2s linear infinite;
}
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
其中，move表示动画名称，2s表示动画时长，linear表示动画速度，infinite表示循环次数，from和to表示动画的起始状态和结束状态。
4. 悬浮效果
悬浮效果可以让用户更加方便地操作网页，通过:hover伪类可以实现悬浮效果，例如：
.btn {
background-color: #FFA500;
color: #ffffff;
font-size: 16px;
padding: 10px 20px;
border-radius: 5px;
}
.btn:hover {
background-color: #FF8C00;
}
其中，btn表示按钮的类名，:hover表示鼠标悬浮在按钮上时的状态。
5. 过渡效果
过渡效果可以使元素的变化更加平滑，通过transition属性可以实现过渡效果，例如：
.box {
transition: all 0.5s ease-in-out;
}
.box:hover {
transform: scale(1.2);
}
其中，all表示过渡的所有属性，0.5s表示过渡时长，ease-in-out表示过渡速度曲线，:hover表示鼠标悬浮在元素上时的状态。
以上就是五个常用的CSS效果，希望可以对你有所帮助。