现在的教学视频都不仅是声音和画面，还有非常重要的字幕。CSS配字幕可以让字幕更加美观、个性化和易读。

video {
/*控制视频和字幕的宽度和高度*/
width: 100%;
height: auto; 
}
/*配字幕*/
.vtt {
font-size: 16px;
color: #fff;
background-color: rgba(0, 0, 0, 0.6); /*字幕背景颜色*/
border-radius: 4px; /*字幕边框*/
padding: 8px;
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
/*控制字幕时间轴*/
::cue {
background-color: transparent;
color: #fff;
font-size: 16px
}
/*正在播放的字幕样式*/
::cue(b) { 
color: #F28300;
font-size: 20px;
font-weight: bold;
}

上述代码中，我们使用了vtt类来定义字幕的样式，包括字号、颜色、背景颜色、边框圆角和位置。在字幕时间轴方面，我们使用::cue伪元素，定义了字幕的颜色、字号和是否加粗。而正在播放的字幕可以使用::cue(b)来定义特殊的样式。

在实际使用中，我们只需要在视频的track元素中加入字幕文件链接即可：

为字幕配上CSS，可以让观众更加轻松地跟随剧情，受益于更好的阅读体验。