另一种风格的 note 和 tag 标签

6个月前 网页前端 125°C

这篇文章最后更新于06-07 09:51前,您需要注意相关的内容是否还可用,如有疑问请联系作者!

效果如下:

在主题的 CSS 文件中引入如下:

span.inline-tag {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .1rem;
    border-radius: 6px;
    background-color: var(--Color)
}

p.red,
span.red {
    --Color: rgb(233, 30, 100);
    --ColorA: rgba(233, 30, 100, 0.2);
}

p.green,
span.green {
    --Color: rgb(139, 195, 74);
    --ColorA: rgba(139, 195, 74, 0.2);
}

p.blue,
span.blue {
    --Color: rgb(3, 169, 244);
    --ColorA: rgba(3, 169, 244, 0.2);
}

p.yellow,
span.yellow {
    --Color: rgb(255, 193, 7);
    --ColorA: rgba(255, 193, 7, 0.2);
}

p.grey,
span.grey {
    --Color: rgb(76, 76, 76);
    --ColorA: rgba(76, 76, 76, 0.2);
}

p.div-border {
    padding: 10px;
    border: 1px solid var(--Color,#333);
    border-radius: 0.4rem;
    background-color: var(--ColorA, transparent);
}

p.left {
    border-left-width: 5px;
    border-left-color: var(--Color);
}

p.bottom {
    border-bottom-width: 5px;
    border-bottom-color: var(--Color);
}

p.right {
    border-right-width: 5px;
    border-right-color: var(--Color);
}

p.top {
    border-top-width: 5px;
    border-top-color: var(--Color);
}

使用方式仍然是以 HTML 标签在 md 文档中引入:

/* note语法示例 */
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>

/* 小tag标签语法示例 */
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>

文章来源于:https://bestzuo.cn/posts/halo-beauty.html

版权说明:本站所提供的文章、图片等内容均为用户发布或互联网整理而来,仅供学习参考,如有侵犯您的版权,请联系我们客服人员删除。
本文链接:https://huue.cc/index.php/archives/365.html
最后编辑: 21年06月07日

随机内容

网友评论

1周前

感觉ci更简单轻便。

2周前

wwwww

3周前

支持awa

4周前

可以可以

1个月前

看看

2个月前

看一下