色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

原生css實現角標

錢浩然2年前10瀏覽0評論

角標指的是位于某個元素右上角或左上角的小圖像或數字,通常用于標識一個按鈕、菜單項或提醒用戶未讀消息等。

在CSS中,實現角標功能可以使用position定位和偽元素來完成,這種方法被稱為“原生CSS實現角標”。

/* 左上角數字角標 */
.badge {
position: relative;
padding: 6px 8px;
border-radius: 50%;
background-color: red;
color: white;
font-size: 12px;
}
.badge::before {
content: " ";
display: block;
position: absolute;
top: 0;
left: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid red;
}
/* 右上角小圖標角標 */
.badge-icon {
position: relative;
}
.badge-icon:after {
content: "";
display: block;
position: absolute;
top: -5px;
right: -5px;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
}

上述代碼分別實現了左上角數字角標和右上角小圖標角標的效果,可以根據需求調整樣式。使用原生CSS實現角標可以減少不必要的JS代碼,提高性能與可維護性。