CSS3.0 能力測試是評估你在 CSS3.0 技術(shù)上的掌握情況的一種測試方式。CSS3.0 技術(shù)是迄今為止最新的 CSS 技術(shù)標準，具有更強的表現(xiàn)力和更多的功能。以下是一些用于測試 CSS3.0 技能的項目。

.box {
width: 200px;
height: 200px;
background-color: yellow;
border-radius: 50%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

圓角和陰影

使用 border-radius 和 box-shadow 屬性可以制作出帶圓角和陰影的元素。在上面的代碼中，我設(shè)置了一個相對于寬度和高度半徑為 50% 的圓角，并且添加了一個黑色和半透明的陰影。

.gradient-box {
height: 100px;
background-color: #f2f2f2;
background-image: linear-gradient(to bottom, #f2f2f2, #cccccc);
}

漸變背景

CSS3.0 還新增加了跨瀏覽器漸變背景的功能。使用 linear-gradient 屬性可以創(chuàng)建從上至下或從左至右的漸變背景。上述代碼將創(chuàng)建一個從 #f2f2f2 到 #cccccc 的漸變背景。

@media screen and (max-width: 600px) {
.mobile-only {
display: block;
}
.desktop-only {
display: none;
}
}
@media screen and (min-width: 600px) {
.mobile-only {
display: none;
}
.desktop-only {
display: block;
}
}

媒體查詢

在移動設(shè)備上，我們經(jīng)常需要隱藏一些在桌面設(shè)備上顯示的元素，或者顯示一些只有在移動設(shè)備上才出現(xiàn)的元素。使用媒體查詢可以實現(xiàn)這個功能。上述代碼將創(chuàng)建一個基于屏幕大小的響應(yīng)式頁面，當(dāng)寬度小于 600px 時，.mobile-only 元素會顯示，.desktop-only 元素會隱藏。當(dāng)寬度大于等于 600px 時，.mobile-only 會隱藏，.desktop-only 顯示。