卡片式 UI 設(shè)計(jì)是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中的一種非常流行的風(fēng)格，它通常被用來(lái)展示信息，例如產(chǎn)品、服務(wù)或文章等。這種風(fēng)格的設(shè)計(jì)早期由 Pinterest 首創(chuàng)，如今已成為很多網(wǎng)站和移動(dòng)應(yīng)用程序 UI 的標(biāo)準(zhǔn)之一。

要實(shí)現(xiàn)卡片式 UI，可以使用 CSS3 的偽元素和盒模型屬性。

.card {
display: inline-block;
width: 250px;
height: 300px;
margin: 20px;
padding: 20px;
border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
}
.card::before {
content: "";
display: block;
position: absolute;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
background-color: #ffffff;
border-top-left-radius: 5px;
}
.card::after {
content: "";
display: block;
position: absolute;
bottom: -10px;
right: -10px;
width: 20px;
height: 20px;
background-color: #ffffff;
border-bottom-right-radius: 5px;
}

在代碼中，我們使用了一個(gè)名為 “card” 的 CSS 類來(lái)實(shí)現(xiàn)卡片的樣式。我們?yōu)榭ㄆx了寬度和高度、外間距和內(nèi)間距、邊框半徑（這會(huì)使邊角變圓）、盒陰影和背景顏色。

通過(guò)使用偽元素，我們可以實(shí)現(xiàn)類似于 “粘貼” 邊角的效果。使用 “::before” 偽元素可以實(shí)現(xiàn)左上角的邊框，使用 “::after” 偽元素可以實(shí)現(xiàn)右下角的邊框。這些偽元素的背景顏色與卡片的背景顏色相同，以創(chuàng)建一個(gè)無(wú)縫的效果。

最終的效果就是一個(gè)非常漂亮的卡片，它會(huì)根據(jù)瀏覽器的大小而自適應(yīng)。如果您要?jiǎng)?chuàng)建一個(gè)具有響應(yīng)性的網(wǎng)站，那么卡片式 UI 可以是一個(gè)非常棒的設(shè)計(jì)元素。