💖简介

博客园-awescnb插件-geek皮肤下，进行相关样式优化，涉及相关优化如下：

• loading优化
• 代码块优化
• 文章内容图片优化
• 博客列表图片优化
• 博客列表标题优化

🌟实现

✨loading优化

• 定义自定义CSS
博客园->管理->设置->页面定制 CSS 代码
  添加代码

/* loading */
#loading{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;background-color:#f4f5f5;pointer-events:none;}.loader-inner{will-change:transform;width:40px;height:40px;position:absolute;top:50%;left:50%;margin:-20px 0 0 -20px;background-color:#3742fa;border-radius:50%;animation:scaleout 0.6s infinite ease-in-out forwards;text-indent:-99999px;z-index:999991;}@keyframes scaleout{0%{transform:scale(0);opacity:0;}40%{opacity:1;}100%{transform:scale(1);opacity:0;}}

✨代码块优化

• 定义自定义CSS
博客园->管理->设置->页面定制 CSS 代码
  添加代码

/* 代码块 */
pre.highlighter-hljs {background: rgb(245, 245, 250);border-radius: 4px;-webkit-box-shadow: 0 4px 11px -2px rgb(37 44 97 / 15%), 0 1px 3px 0 rgb(93 100 148 / 6%);box-shadow: 0 4px 11px -2px rgb(37 44 97 / 15%), 0 1px 3px 0 rgb(93 100 148 / 6%);}
.hljs {background: #f5f5fa;}

修改背景及边框

✨文章内容图片优化

• 定义自定义CSS
博客园->管理->设置->页面定制 CSS 代码
  添加代码

/* 文章内容图片 */
#post_detail img{box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);border-radius: 8px !important;}

修改文章内图片边框及阴影

✨博客列表图片优化

• 定义自定义CSS
博客园->管理->设置->页面定制 CSS 代码
  添加代码

/* 博客列表图片 */
.custom-card img{box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);border-radius: 8px !important;}

修改博客列表中图片的边框及阴影

✨博客列表标题优化

• 定义自定义CSS
博客园->管理->设置->页面定制 CSS 代码
  添加代码

/* 博客列表标题 */
.custom-card-title{height: 45px;overflow: hidden;}

修改博客列表标题展示单行

---

结束