漂亮的CSS渐变 note 标签样式

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

Screenshot_2021-06-06-22-02-05.png
注意该样式需要引入 FontAwesome v5.0+ 以上的 CSS 文件,否则图标不会展示。
引入 CSS 链接如下:

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet">

然后在 main.css 中添加如下样式:

.tip {
    position: relative;
    color: #fff;
    background: #20a0ff;
    background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
    background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
    background: linear-gradient(90deg,#20a0ff,#20b8ff);
    padding: 6px 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
    box-shadow: 0 3px 5px rgba(32,160,255,.5);
    margin-bottom: 20px
}
 
.tip p {
    margin: 5px 0!important
}
 
.tip:before {
    background: #20a0ff;
    background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
    background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
    background: linear-gradient(0deg,#0092ff,#20b8ff);
    border-radius: 50%;
    color: #fff;
    content: "\f129";
    font-size: 12px;
    position: absolute;
    width: 24px;
    height: 24px;
    line-height: 24.5px;
    left: -12px;
    top: -12px;
    -webkit-box-shadow: 0 0 0 2.5px #fff;
    box-shadow: 0 0 0 2.5px #fff;
    font-weight: 600;
    font-family: "Font Awesome 5 Free";
    text-align: center
}
 
.btn,.getit a {
    position: relative
}
 
.well .tip:before {
    -webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
    box-shadow: 0 0 0 2.5px #f7f8f9
}
 
.tip ol {
    margin: 0
}
 
.tip.success {
    background: #61be33;
    background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
    background: -webkit-linear-gradient(left,#61be33,#8fce44);
    background: linear-gradient(90deg,#61be33,#8fce44);
    text-shadow: 0 -1px #61be33;
    -webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5);
    box-shadow: 0 3px 5px rgba(104,195,59,.5)
}
 
.tip.success:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
    background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
    background: linear-gradient(0deg,#52bb1d,#95d34b);
    content: "\f00c";
    text-shadow: 0 -1px #61be33
}
 
.tip.warning {
    background: #ff953f;
    background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
    background: -webkit-linear-gradient(left,#ff953f,#ffb449);
    background: linear-gradient(90deg,#ff953f,#ffb449);
    text-shadow: 0 -1px #ff953f;
    -webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
    box-shadow: 0 3px 5px rgba(255,154,73,.5)
}
 
.tip.warning:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
    background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
    background: linear-gradient(0deg,#ff8f35,#ffc149);
    content: "\f12a";
    text-shadow: 0 -1px #ff953f
}
 
.tip.error {
    background: #ff4949;
    background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
    background: -webkit-linear-gradient(left,#ff4949,#ff7849);
    background: linear-gradient(90deg,#ff4949,#ff7849);
    text-shadow: 0 -1px #ff4949;
    -webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
    box-shadow: 0 3px 5px rgba(255,73,73,.5)
}
 
.tip.error:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
    background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
    background: linear-gradient(0deg,#ff3838,#ff7849);
    content: "\f00d";
    text-shadow: 0 -1px #ff4949
}
 
/*夜间适配*/
.night .tip {
    filter: brightness(0.7);
}
 
/* snote夜间模式 */
.night .tip{
  color: #4c4948;
}

同上面所有外挂样式一下,均使用 HTML 标签的方式在 md 中写入:

<div class='tip'><p>默认情况<p></div>
<div class='tip success'><p>success<p></div>
<div class='tip error'><p>error<p></div>
<div class='tip warning'><p>warning<p></div>

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

标签: css 渐变 标签 样式
评论 打赏
最后编辑于:2021 年 06 月 06 日

网友评论 0 评论

评论空空如也,快来评论吧!

作者资料

寻梦xunm

博主

邮箱:1340326824@qq.com

链接:http://huue.cc/index.php/archives/351.html

网友评论

  • 溜溜测试一下
    发表于:2周前
  • ggfhjghjfghjfgjgffghjfghjfgjfghjfghjfgh
    发表于:3周前
  • 寻梦xunm等有空了重新调整一下字体大小
    发表于:2个月前
  • 城南旧事字太小了,看的难受
    发表于:2个月前
  • 123456加油
    发表于:2个月前
  • 寻梦xunm2333333333
    发表于:2个月前

其它信息

  • 文章:603
  • 分类:28
  • 评论:46
  • 页面:4

订阅信息

返回顶部