audio css 美化

在CSS中，可以使用众多的属性来美化音频元素，例如：

1. background-color：设置音频控件的背景颜色；
2. color：设置音频控件的文本颜色；
3. border-radius：设置音频控件的圆角大小；
4. box-shadow：设置音频控件的阴影效果；
5. width和height：设置音频控件的宽度和高度；
6. outline：设置音频控件获得焦点时的边框样式；
7. cursor：设置鼠标悬停在音频控件上时的光标样式。

例如，以下代码可以实现一个简单的音频控件的美化：

audio {
  background-color: #f6f6f6;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  width: 300px;
  height: 50px;
  outline: none;
  cursor: pointer;
}

audio::-webkit-media-controls-panel {
  background-color: #f6f6f6;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

audio::-webkit-media-controls-play-button {
  background-color: #f6f6f6;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  color: #333;
}

这段代码中，我们设置了音频控件的背景颜色、圆角和阴影效果，以及宽度和高度。此外，我们还使用了伪元素选择器来设置控件面板和播放按钮的样式。最终的效果如下图所示：