H5+CSS3+JS逆向前置——CSS基础样式表

在H5项目中，我们通常需要使用CSS3来增强用户界面，提升用户体验。以下是一些常见的CSS3样式和它们的使用场景：

1. 圆角（border-radius）：可以让你的元素变得更加圆润。

.box {
  border: 2px solid #000;
  padding: 20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

2. 阴影（box-shadow）：可以给元素添加阴影，增加立体感。

.box {
  width: 200px;
  height: 200px;
  background-color: #BADA55;
  box-shadow: 10px 10px 5px #888888;
}

3. 渐变（gradient）：可以创建从一种颜色平滑过渡到另一种颜色的效果。

.box {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red , yellow);
}

4. 变换（transform）：可以对元素进行旋转、缩放、倾斜等操作。

.box {
  width: 200px;
  height: 200px;
  background-color: #BADA55;
  transform: rotate(45deg);
}

5. 动画（animation）：可以创建复杂的动画效果。

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
.box {
  width: 200px;
  height: 200px;
  animation-name: example;
  animation-duration: 4s;
}

6. 媒体查询（Media Queries）：可以根据不同的屏幕尺寸应用不同的样式。

/* 对于宽度小于600px的屏幕 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

7. 伪类（:hover, :active, :focus 等）：可以在特定的用户交互状态下应用不同的样式。

.box {
  width: 200px;
  height: 200px;
  background-color: #BADA55;
}
 
.box:hover {
  background-color: #0000FF;
}

以上是一些基本的CSS3样式和它们的使用场景，CSS3提供了丰富的样式和动画，可以让我们的网页更加生动和高级。在实际开发中，我们可以根据项目需求，灵活运用这些样式和动画。