在網頁設計中，有時需要在某些文字或圖片上添加小角標來突出顯示某種信息。那么怎樣使用CSS來打出這些小角標呢？ 首先，我們需要創建一個盒子來容納小角標。我們可以使用CSS中的偽元素:before或:after來創建一個偽元素，偽元素的內容是我們想要顯示的小角標，然后將偽元素作為盒子的子元素。 例如，我們想在一個文字后面添加一個紅色的三角形小角標，代碼如下： ```html

這是一段文字

``` ```css .badge { position: relative; display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid red; content: ""; vertical-align: middle; } ``` 在這段CSS代碼中，我們使用了position屬性將偽元素定位到文字的后面，使用width和height將偽元素定義為一個三角形，使用border定義三角形的邊框，使用content屬性將偽元素的內容設為空。 通過修改border的值，我們可以定義不同形狀的小角標，例如： ```css /* 矩形小角標 */ .badge { position: relative; display: inline-block; width: 20px; height: 10px; background-color: red; color: white; font-size: 12px; text-align: center; line-height: 10px; content: "new"; } /* 圓形小角標 */ .badge { position: relative; display: inline-block; width: 20px; height: 20px; background-color: red; color: white; font-size: 12px; text-align: center; line-height: 20px; border-radius: 50%; content: "1"; } ``` 以上示例中，我們使用了不同的CSS屬性來定義矩形和圓形小角標，例如使用background-color定義背景顏色，使用color定義文字顏色，使用font-size和line-height定義字體大小和行高等。 通過使用CSS偽元素和一些基本的CSS屬性，我們可以輕松地打出各種形狀、各種顏色的小角標來將信息進行突出顯示。