效果如图↑
<!doctype html> <html lang="en"> <head> <style> body { background: #eeeff2; } /*左上角标签，父元素必须设置position: relative;overflow: hidden;height: 大于150;width: 大于150px;，同时，角标标签内加入属性superscriptTitle="左上角标签文字内容"*/ [superscriptTitle]:after { content: attr(superscriptTitle); width: 110px; height: 30px; font-size: 14px; color: white; display: flex; justify-content: center; align-items: center; background: linear-gradient(to right, orange, orangered); position: absolute; top: 0; /* 左上角角标 */ /* left: 0; transform: rotate(-0.125turn) translate(-29px, -10px); */ /* 右上角角标 */ right: 0; transform: rotate(0.125turn) translate(29px, -10px); } /*时下流行的风格--【新拟态】________________________*/ [superscriptTitle] { position: relative; overflow: hidden; font-family: 'Arial'; margin: 100px; border-radius: 40px; width: 200px; height: 200px; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.1), -10px -10px 15px rgba(255, 255, 255, 0.9); background: linear-gradient(-180deg, #eee, #f9f9f9); } /*渐变文字样式________________________*/ [superscriptTitle] p { margin: 0; padding: 0; line-height: 200px; font-size: 100px; text-align: center; color: #238aea; /*渐变文字（仅谷歌内核浏览器支持）*/ background: -webkit-linear-gradient(0deg, #1858f1, #32c0e3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style> </head> <body> <div superscriptTitle="标签内容"> <p>Aa</p> </div> </body> </html>新样式：左上角角标标签NEW、最新CSS代码-CSDN博客【代码】新样式：左上角角标标签NEW、最新CSS代码。https://blog.csdn.net/qq_37860634/article/details/147396585左上角角标NEW、最新CSS代码_css左上角标签-CSDN博客文章浏览阅读864次。该文章介绍了如何使用CSS实现一个左上角的角标效果，通过设置父元素的相对定位和子元素的绝对定位，结合旋转和线性渐变背景，创建了一个具有‘NEW’内容的橙色到红色渐变角标。示例代码中还展示了如何调整尺寸、颜色和样式。
https://blog.csdn.net/qq_37860634/article/details/130272554
, Ubuntu server, 爱快, ROS, Pfsense, m0n0wall, OPNsense)
)