演示效果
代码教程:
将下面代码添加在 后台子比设置==》全局功能==》自定义代码==》自定义CSS样式
文章列表卡片代码:
/* 文章列表卡片3个小圆圈样式美化 */
.posts-item.card {
padding: 35px 10px 10px 10px!important;
}
.posts-item {
position: relative !important;
}
.posts-item.card::before {
content: "";
display: block;
background: #fc625d;
top: 13px;
left: 15px;
border-radius: 50%;
width: 9px;
height: 9px;
box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
margin: 0px 2px -7px;
z-index: 1;
position: absolute;
}
/* 文章列表卡片3个小圆圈样式美化 */
代码区块添加圆点美化代码:
/*编辑器+圆点美化*/
.enlighter::before {
content: "";
display: block;
background: #fc625d;
top: 9px;
left: 15px;
border-radius: 50%;
width: 15px;
height: 15px;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
margin: 0px 2px -7px;
z-index: 1;
position: absolute;
}
.enlighter-overflow-scroll.enlighter-v-standard .enlighter {
padding: 35px 0 12px 0;
}
/*编辑器+圆点美化*/