纯CSS-网站顶部菜单分类角标-菜单角标美化CSS代码！

找到可添加自定义CSS样式代码的地方复制以下代码：

/* 分类角标 */
.yfxxin {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.0em;

这段代码定义了两个类名为`.yfxxin`和`.new`的样式规则。

`.yfxxin`样式规则的属性如下：
– `display: inline-block;`：元素以块级元素的方式显示，但与其他元素共享同一行。
– `transform: translateY(-12px);`：元素相对于其正常位置向上移动12像素。
– `font-size: .75rem;`：字体大小为0.75个根元素的大小。
– `letter-spacing: 0.0em;`：字母间距为0。
– `background: linear-gradient(to top, #b4b1ef, #e21fc7 7.56%);`：背景使用线性渐变，从底部到顶部，颜色从`#b4b1ef`渐变到`#e21fc7`，在高度的7.56%处发生变化。
– `color: #ffffff;`：字体颜色为白色。
– `border-radius: 2rem;`：边框圆角半径为2个根元素的大小。
– `padding: .15rem .275rem;`：内边距为0.15个根元素的大小顶部/底部和0.275个根元素的大小左侧/右侧。
– `line-height: 1;`：行高为1，即与字体大小相等。
– `font-weight: bold;`：字体加粗。

`.new`样式规则的属性如下：

– `display: inline-block;`：元素以块级元素的方式显示，但与其他元素共享同一行。
– `transform: translateY(-12px);`：元素相对于其正常位置向上移动12像素。
– `font-size: .75rem;`：字体大小为0.75个根元素的大小。
– `letter-spacing: 0.05em;`：字母间距为0.05个em。
– `background: linear-gradient(to top, #f308a0 0%, #fb0655 100%);`：背景使用线性渐变，从底部到顶部，颜色从`#f308a0`渐变到`#fb0655`。
– `color: #ffffff;`：字体颜色为白色。
– `border-radius: 1rem;`：边框圆角半径为1个根元素的大小。
– `padding: .15rem .275rem;`：内边距为0.15个根元素的大小顶部/底部和0.275个根元素的大小左侧/右侧。
– `line-height: 1;`：行高为1，即与字体大小相等。
– `font-weight: bold;`：字体加粗。

这些样式规则可以用于在HTML中的元素上应用这些样式，例如：

“`html
<span class=”yfxxin”>分类角标1</span>
<span class=”new”>分类角标2</span>
“`
第一个`span`元素将应用`.yfxxin`样式规则，第二个`span`元素将应用`.new`样式规则。

创心域技术网永久会员

打赏 收藏 海报 链接