首页
   /       /   
Css标题样式美化
12月
30
Css标题样式美化
作者:大彭Sir    分类: 随手笔记

效果

今天在写Emlog百度小程序的时候发现原来的标题样式太丑了,简简单单改一下吧,本文代码可直接放在brief网站主题里面。

表示样式美化效果

before伪元素选择器

:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。

代码实现

先整体设置

 h1,h2,h3,h4,h5,h6{
  position: relative;
  padding-bottom: 8px;
}
h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{
  width: 40px;
  height: 3px;
  position: absolute;
  content: '';
  top: auto;
  left: 0;
  bottom: 3px;
  border-radius: 3px;
  transition: 4s;
}

然后单个设置颜色

h1:before{
  background-image:linear-gradient(to right ,green,rgb(4, 46, 4));
  box-shadow: 1px 1px 3px -1px green;
}

h2:before{
  background-image:linear-gradient(to right ,#f17c67,#971903);
  box-shadow: 1px 1px 3px -1px #f17c67;
}

这两个时示例其他的需要你自己添加

获取完整代码

如果您的网站主题是brief可直接替换markdown.css文件
文件地址:

https://www.hkiii.cn/content/templates/brief/css/markdown.css
本文标签:标签: css UI 美化
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录