如何修改audio的样式

音频元素（audio）在HTML中通常使用`<audio>`标签来嵌入，如果你想修改其样式，可以使用CSS来控制。尽管浏览器内置了一些基本样式，如宽度、高度、边框等，但是audio元素的一些样式限制较多，比如无法直接设置宽度、高度，因为它通常是自适应大小的。

然而，你可以对一些方面进行定制，例如：

1. **控制按钮**：通过`:before`, `:after`伪元素添加自定义图标，改变play/pause按钮的外观。例如：

   audio::before {
     content: "\f04b"; /* 播放图标 */
     display: inline-block;
     font-family: 'Font Awesome 5 Free';
   }
   
   audio:hover::before {
     content: "\f04c"; /* 暂停图标 */
   }

2. **封面图像（thumbnail）**：可以为audio元素创建一个包含封面图片的占位符，然后调整尺寸和位置。

   <img src="cover.jpg" alt="Audio Cover">
   <audio controls>
     <!-- ... -->
   </audio>

使用CSS调整img的样式。

3. **自定义播放区域背景**：虽然不能改变播放/暂停按钮的颜色，但可以改变整个播放区域的背景或悬停效果。

   audio::-webkit-media-controls-container {
     background-color: #f0f0f0; /* Webkit 内置风格覆盖 */
   }

请注意，不是所有样式都能立即生效，因为音频控件在某些情况下是由浏览器内核提供的，并受兼容性限制。同时，上述方法可能需要针对不同的浏览器做一些适配。