写作不停,美化不止!mac小圆点效果原本代码块样式就挺....干净的,光秃秃的,太单调了:
文章插图
是吧很丑,于是自己发挥改成了这样:
文章插图
好吧还是太单调,也没好看到哪里去,于是隔了两天又重新改,DuangDuangDuang!!
文章插图
改成了自己想要的样子,主要的就是喜欢这个mac的三个小圆点,very nice!!写作欲望停不下来了我屮艸芔茻 。
设置思路
文章插图
提供下思路,如上图,typora通过控制台定位到代码块的元素,找到所有代码块通用的class(应主题而变),这个class就是给代码块设置样式的
那么将下面的代码类名改成相应的,放到css主题文件中即可
可能还需要进行一定的调整,稍微的有点繁琐
.box{position: relative;padding:40px 20px 20px;}.box::before {content: '';position: absolute;-webkit-border-radius: 50%;border-radius: 50%;background: #fc625d;width: 12px;height: 12px;left: 12px;-webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;z-index: 2;}
上边代码就是将box(代码块编译后对应的元素)设置成相对布局,然后三个点是其子元素,设置成绝对布局,就是子绝父相,再是子元素设置成伪元素,插入在box的最前边,然后通过box-shadow阴影颜色设置,妙极了,高效率的思想值得学习!设置后图标不显示可以将z-index属性适当调整,可以top,left适当调整.......
如果嫌麻烦可以直接是用我使用的主题,拿来即用,主题下载地址看我之间这篇文章:https://www.cnblogs.com/ruyan-lx/p/16807951.html
参考:【Typora设置代码块Mac风格三个圆点】
https://www.cnblogs.com/lavard/p/15240742.html
https://wenku.baidu.com/view/81431fd8cbd376eeaeaad1f34693daef5ef713cd.html
经验总结扩展阅读
- windows设置开机启动程序
- lol电脑fps低怎么设置电脑(配置足够但是lolfps低)
- lol帧数提高设置(lol间歇性掉帧卡顿)
- YY怎么添加频道(yy频道如何设置不让游客进入)
- 笔记本电脑如何调烟雾头(笔记本呼吸灯怎么设置)
- 苹果12怎么设置抖音动态壁纸(苹果x怎么将抖音设置成动态壁纸)
- 抖音怎么设置只有锁屏的动态壁纸(会跳动的兔子动态锁屏壁纸)
- 怎么更改抖音动态壁纸设置类型(如何重新设置抖音动态壁纸)
- 抖音怎么快速设置动态壁纸(抖音动态最火壁纸美女)
- 抖音动态锁屏怎么设置(抖音很火的电脑动态屏保)