在H5项目中，我们通常需要使用CSS3来增强用户界面，提升用户体验。以下是一些常见的CSS3样式和它们的使用场景：
- 圆角（border-radius）：可以让你的元素变得更加圆润。
.box {
border: 2px solid #000;
padding: 20px;
width: 200px;
height: 200px;
border-radius: 50%;
}
- 阴影（box-shadow）：可以给元素添加阴影，增加立体感。
.box {
width: 200px;
height: 200px;
background-color: #BADA55;
box-shadow: 10px 10px 5px #888888;
}
- 渐变（gradient）：可以创建从一种颜色平滑过渡到另一种颜色的效果。
.box {
width: 200px;
height: 200px;
background: linear-gradient(to right, red , yellow);
}
- 变换（transform）：可以对元素进行旋转、缩放、倾斜等操作。
.box {
width: 200px;
height: 200px;
background-color: #BADA55;
transform: rotate(45deg);
}
- 动画（animation）：可以创建复杂的动画效果。
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.box {
width: 200px;
height: 200px;
animation-name: example;
animation-duration: 4s;
}
- 媒体查询（Media Queries）：可以根据不同的屏幕尺寸应用不同的样式。
/* 对于宽度小于600px的屏幕 */
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
- 伪类（:hover, :active, :focus 等）：可以在特定的用户交互状态下应用不同的样式。
.box {
width: 200px;
height: 200px;
background-color: #BADA55;
}
.box:hover {
background-color: #0000FF;
}
以上是一些基本的CSS3样式和它们的使用场景，CSS3提供了丰富的样式和动画，可以让我们的网页更加生动和高级。在实际开发中，我们可以根据项目需求，灵活运用这些样式和动画。