.volume-control { position: relative; margin-left: 360px; width: 128px; height: 30px; border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; overflow: hidden; } /* 背景色 */ .volume-background { position: absolute; left: 0; width: 100%; height: 100%; border-radius: 16px; /* background-color: rgba(255, 255, 255, 0.5); */ background-color: rgba(0, 0, 0, 0.3); -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; } .volume-progress { position: absolute; height: 100%; left: 0; top: 0; background-color: #fff; } /* 当前音量显示 */ .volume-value { position: absolute; color: #b1b1b1; font-size: 12px; line-height: 100%; height: 100%; left: 10px; display: flex; align-items: center; z-index: 1; } .volume-icon-box { position: absolute; top: 6px; left: 98px; height: 18px; display: flex; align-items: center; } #volume-icon { height: 100%; }