html5控件调节音量,HTML5 使用input[type=range]输入控件构造的音量调节按钮

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

html {

background: linear-gradient(#f8f8f8, #d9d9d9);

}

body {

display: flex;

justify-content: space-around;

margin: 0;

}

input[type='range'] {

border: solid 4em transparent;

align-self: center;

padding: 0;

width: 19.5em;

height: 3.375em;

border-radius: 0.25em;

background: linear-gradient(#eabd22, #eabd22) no-repeat left 7.75em bottom 7.375em, linear-gradient(#eabd22, #eabd22) no-repeat left 8.75em bottom 7.375em, linear-gradient(#eabd22, #eabd22) no-repeat left 9.75em bottom 7.375em, linear-gradient(#eabd22, #eabd22) no-repeat left 10.75em bottom 7.375em, linear-gradient(#eabd22, #eabd22) no-repeat left 11.75em bottom 7.375em, linear-gradient(#eabd22, #eabd22) no-repeat left 12.75em bottom 7.375em, linear-gradient(#eabd22, #eabd22) no-repeat left 13.75em bottom 7.375em, linear-gradient(#eabd22, #eabd22) no-repeat left 14.75em bottom 7.375em, linear-gradient(#eabd22, #eabd22) no-repeat left 15.75em bottom 7.375em, linear-gradient(#eabd22, #eabd22) no-repeat left 16.75em bottom 7.375