CSS角標特效是指在網頁中使用CSS樣式對文字內容添加角標,使其呈現出動態、美觀的效果。開發者可以使用CSS樣式設置角標的大小、顏色、字體、位置等屬性,從而實現不同種類、不同形狀的角標效果。
.badge {
position: absolute;
top: 0;
right: 0;
width: 18px;
height: 18px;
border-radius: 9px;
background-color: red;
font-size: 10px;
font-weight: bold;
color: #fff;
text-align: center;
line-height: 18px;
transform: translate(50%,-50%);
}
.badge:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 10px 6px;
border-color: transparent transparent red transparent;
transform: translate(50%,-100%);
}
上述代碼是一個簡單的CSS角標特效樣式,其中通過偽元素after實現角標尖角的繪制。通過使用不同的顏色、圓角屬性、尖角樣式等進行更改,可以實現多種不同的角標特效。