卡片角標是一個非常實用的功能，它可以讓我們在卡片中添加一些小圖標或文字提示，以幫助用戶更好地理解和使用頁面功能。在此，我們將介紹如何使用CSS來創建卡片角標，并提供一些有用的代碼示例。 首先，我們需要創建一個卡片。我們可以使用HTML和CSS來創建一個基本的卡片樣式，如下所示：

<div class="card">
<div class="card-header">
<h2>Card Title</h2>
</div>
<div class="card-body">
<p>Card Content</p>
</div>
</div>
.card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
.card-header {
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
padding: 5px;
}
.card-header h2 {
margin: 0;
}
.card-body {
padding: 10px;
}

接下來，我們可以使用CSS中的偽元素來添加角標。 使用CSS ::before 和 ::after 偽元素 我們可以使用CSS中的 ::before 或者 ::after 偽元素來創建卡片角標。 ::before 偽元素能夠插入一個元素或者文字在目標元素前面，而 ::after 偽元素則能夠插入一個元素或者文字在目標元素后面。下面是一個使用 ::after 偽元素實現卡片角標的例子：

.card:after {
content: "New";
color: #fff;
background-color: #f00;
font-size: 12px;
padding: 2px 5px;
border-radius: 10px;
position: absolute;
top: 10px;
right: 10px;
}

上面的代碼實現了一個紅色的卡片角標，顯示著“New”這個單詞。我們可以使用這個代碼作為起點，可以更改內容、顏色、大小、位置、形狀等來滿足我們的需求。 最后，我們需要適應不同尺寸的屏幕，我們可以利用CSS中的媒體查詢來實現。舉例來說，以下代碼可以在顯示尺寸小于768px時隱藏卡片角標：

@media screen and (max-width: 768px) {
.card:after {
display: none;
}
}

總結 在本文中，我們學習了使用CSS來創建卡片角標。我們用了 ::before 和 ::after 偽元素、顏色、邊框半徑、位置、媒體查詢來實現。您可以使用上述代碼作為起點，在其中插入您自己的CSS規則，來實現自定義的卡片角標效果。