CSS 不僅可以用來美化網(wǎng)頁，還可以用來作曲。在音樂作品中，一些音符可以用 CSS 的屬性來表示，使得音樂可以以代碼方式展現(xiàn)。

/* 以CSS代碼方式表示一個(gè)音符 */
.note {
position: absolute;
height: 50px;
width: 50px;
border-radius: 50%;
background: black;
left: 200px;
top: 100px;
}

在上面的代碼中，.note表示音符，position: absolute;讓它可以與 HTML 的其他部分分離出來移動(dòng)，height和width控制音符大小，border-radius是圓角效果，background設(shè)為黑色。設(shè)定left和top兩個(gè)屬性可以讓音符移動(dòng)到特定的位置。

/* 以CSS代碼方式表示樂譜 */
.music {
display: flex;
justify-content: center;
align-items: center;
font-size: 60px;
}
.music::before {
content: "?";
color: black;
margin-right: 10px;
}
.music::after {
content: attr(data-notes);
color: blue;
}

在上面的代碼中，.music表示樂譜，里面放置著音符。使用display: flex;這個(gè)屬性，可以把音符放置到中央，justify-content和align-items可以使它居中。font-size、::before和::after也是必不可少的。

至此，我們已經(jīng)可以使用 CSS 進(jìn)行一些簡(jiǎn)單的音樂作曲了。制作復(fù)雜的音樂還需要更多的技巧，但是這些基本的概念已經(jīng)足夠讓我們開始探索 CSS 音樂世界的可能性。