CSS扁平化方框是一種流行的設(shè)計元素，它可以通過簡單的CSS代碼來實現(xiàn)。在現(xiàn)代Web設(shè)計中，扁平化設(shè)計風(fēng)格已經(jīng)成為主流，因為它可以使界面看起來更簡潔和舒適，并且可以提高用戶體驗。

.box {
background-color: #fff;
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
border: 3px solid #ccc;
border-radius: 4px;
padding: 20px;
margin: 10px;
transition: all 0.3s ease-in-out;
}
.box:hover {
box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
transform: translateY(-2px);
}

上面的CSS代碼定義了一個名為"box"的CSS類，這個類可以被應(yīng)用于任何HTML元素上。這個類實現(xiàn)了一個扁平化方框，包括白色背景、灰色邊框、圓角、陰影和過渡效果。此外，當(dāng)用戶懸停在方框上時，它會產(chǎn)生一個向上移動的效果和更明顯的陰影。

這種扁平化方框可以被用于許多不同的Web元素，例如按鈕、文本框、導(dǎo)航菜單和圖像。此外，您可以通過更改CSS屬性來創(chuàng)建自定義的扁平化方框，例如更改背景顏色、邊框大小和邊框顏色。

在今天的Web設(shè)計中，扁平化元素已經(jīng)成為一種必備的設(shè)計元素，它可以使您的網(wǎng)站看起來更現(xiàn)代和時尚。因此，如果您正在設(shè)計一個現(xiàn)代的網(wǎng)站，那么使用扁平化方框是一個非常不錯的選擇。