css 美化audio标签

要美化audio标签的话，可以通过CSS来实现。以下是一个简单的例子：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

/* 隐藏默认的控制条 */
audio::-webkit-media-controls {
  display: none !important;
}

/* 自定义控制条样式 */
audio {
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 5px;
  padding: 10px;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-pause-button {
  display: none !important;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-volume-slider {
  display: none !important;
}

audio::-webkit-media-controls-volume-slider-container {
  display: inline-block;
  vertical-align: middle;
}

audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
  background-color: #333;
  border-radius: 50%;
}

audio::-webkit-media-controls-volume-slider::-webkit-slider-runnable-track {
  height: 5px;
  background-color: #ccc;
  border-radius: 5px;
}

这个例子中，我们首先隐藏了默认的控制条，然后定义了一个自定义的控制条样式。在样式中，我们将控制条的宽度设置为100%，背景色设置为灰色，边框圆角设置为5px，内边距设置为10px。

接着，我们隐藏了播放/暂停按钮、时间显示、静音按钮和音量滑块，并将音量滑块的容器设置为inline-block，垂直居中。最后，我们定义了音量滑块的样式，包括滑块的背景色、高度和边框圆角。