Typora設置代碼塊Mac風格三個圓點 _生活百科

寫作不停，美化不止！

mac小圓點效果原本代碼塊樣式就挺....干凈的，光禿禿的，太單調了：

文章插圖
是吧很丑，于是自己發揮改成了這樣：

文章插圖
好吧還是太單調，也沒好看到哪里去，于是隔了兩天又重新改，DuangDuangDuang?。?

文章插圖
改成了自己想要的樣子，主要的就是喜歡這個mac的三個小圓點，very nice??！写作欲望停不蠀未了瘟xH芔茻。
設置思路

文章插圖
提供下思路，如上圖，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