在網頁設計中，加上角標可以讓頁面更加生動活潑，同時也能夠吸引用戶的注意力。在CSS中，可以使用偽類來實現給圖片加上角標的效果。

/* HTML結構 */
<img src="image.jpg" alt="圖片">
/* CSS樣式 */
img:hover::after {
content: "新品";
position: absolute;
top: 10px;
left: 10px;
background-color: #ff0000;
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 14px;
}

上面的代碼中，我們使用了:hover偽類以及::after偽元素來實現給圖片添加角標的效果。在鼠標懸停在圖片上時，角標會跟隨鼠標一起移動。

另外，我們通過設置position屬性來控制角標的位置，background-color屬性來設置角標的背景顏色，padding屬性來設置角標的內邊距，border-radius屬性來設置角標的圓角半徑，font-size屬性來設置角標文本的字體大小。

在實際應用中，可以根據具體的需要調整樣式屬性，以達到更好的效果。通過使用CSS偽類，給圖片加上角標可以讓我們更直觀地了解到CSS的強大，同時也能夠提升網頁的用戶體驗。