CSS3的出現,給網頁設計帶來了許多新的特性,其中之一就是音頻屬性。你可以通過CSS3的audio屬性來設置一個網頁音頻元素。
audio { width: 400px; height: 50px; background-color: #eee; border: 1px solid #333; padding: 10px; }
如上代碼所示,你可以通過CSS3來設置音頻元素的寬高、背景顏色、邊框樣式、內邊距等等。不過,僅僅通過CSS3無法實現網頁音頻的播放功能。為了讓音頻元素真正發揮作用,我們還需要使用一些JavaScript代碼。
var audio = document.createElement('audio'); audio.src = 'music.mp3'; audio.controls = 'controls'; document.body.appendChild(audio);
如上代碼所示,我們創建了一個audio標簽,并設置了其音頻源為music.mp3,添加了控制器,最后將其添加到網頁中。
現在,你可以自由地修改CSS3屬性和JavaScript代碼,來實現一個自己獨有的音頻網頁。不過,需要注意的是,在使用CSS3的audio屬性時,需要確保瀏覽器支持這一特性。
上一篇css3 api中文
下一篇css2速查手冊