CSS 訊息角標
阿新 • • 發佈：2022-03-31
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { position: relative; width: 50px; height: 50px; background-color: blue; margin-bottom: 20px; } .notice{ position: absolute; top: 0; right: 0; box-sizing: border-box; min-width: 16px; padding: 0 3px; color: #fff; font-weight: 500; font-size: 12px; font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif; line-height: 1.2; text-align: center; background-color: #ee0a24; border: 1px solid #fff; border-radius: 16px; transform: translate(50%, -50%); transform-origin: 100%; } </style> </head> <body> <div class="box"> <div class="notice">1</div> </div> <div class="box"> <div class="notice">99+</div> </div> </body> </html>
1 99+