为 Hexo 文章块添加阴影

最新推荐文章于 2025-07-23 10:46:05 发布
原创 最新推荐文章于 2025-07-23 10:46:05 发布 · 542 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文介绍如何使用CSS的box-shadow属性为Hexo博客的文章块添加阴影效果，通过修改阴影颜色和参数，可以轻松定制视觉风格。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

也可在我的个人博客里看 为 Hexo 文章块添加阴影

实现方式：利用 box-shadow

代码

在文章块的css部分（我的是在 .post-main,.post-entry 里）添加如下代码

box-shadow: 8px 5px 10px #696969;

其中，#696969 是一种灰色，如果想要将阴影换为其它颜色，可以在Encycolorpedia里选择你喜欢的颜色，而关于 box-shadow 的具体用法参见下面的参考。

参考

MDN里有全面的阴影的用法

Hexo-悬挂灯笼
唐先森的博客
05-22 1057
文章链接 ：Hanging lanterns | 唐志远の博客 标题 之前有小伙伴留言问我博客悬挂灯笼如何实现的，现在写一篇简单的教程。 悬挂灯笼效果 效果如下： PC端 Mobile端 步骤 新建CSS样式 在 themes\Butterfly\source\css 文件下新建 CSS 文件，并命名为 lantern.css ( 当然名字随便取，只要在主题配置文件中引入对应的 CSS文件即可 )，将以下代码复制到新建的 lantern.css 中。 /* 灯笼 Start */
Hexo 美化优化配置（持续更新）
jieruis的博客
01-23 2158
文章目录添加网站运行时间添加文章边框阴影效果在Hexo博客中插入图片src 链接本地绝对路径本地相对路径Base64 格式参考链接和工具相册某某地方玩广告新建文章时，在相同目录下创建同名文件夹（便于图片管理）评论系统 添加网站运行时间 一个比较好的小功能，可以看见自己的博客运行多久了，时间一天天的增加，成就感也会一天天增加的 在 \themes\hexo-theme-spfk\layout_partial\footer.ejs 文件下添加以下代码：` <span id="timeDate">载入
Hexo博客NexT主题下添加文章边框阴影效果
野猿新一
06-26 3631
1.打开themes/next/source/css/_custom/custom.styl文件 2.在custom.styl文件中添加如下配置 .post { margin-top: 60px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5...
Hexo博客的Next主题 7.5版本给首页文章添加阴影
qq_39119496的博客
12-03 1822
在next主题文件下找到\next\source\css_common\components\post下的post.styl文件 找到.post_block 添加阴影样式 // 主页文章添加阴影效果 .post_block { opacity: 0; margin-top: 60px; margin-bottom: 60px; padding: 25px; -we...
Hexo博客NexT主题下添加文章边框阴影效果？
Mxeron的博客
08-01 705
找到主题下的这个文件themes\next\source\css_common\components\post\index.styl。
主页文章添加背景图片后给文章添加阴影效果 - Hexo建站(六)
Clearlight's Blog
03-06 929
博客地址预览: http://www.clearlight.com.cn 打开博客主目录文件 -> themes -> next -> source -> css -> _custom -> custom.styl 里面填上如下代码: .post-block { background: rgba(255, 255, 255, 0.84); paddin...
Hexo-inside主题-背景全透明
12-14
Hexo，inside主题，简体中文hans， 放在themes\inside\source目录下。 背景全透明
hexo博客的背景设置
Faith的博客
07-25 1万+
主要有以下30种： 在右上角或者左上角实现fork me on github添加RSS添加动态背景实现点击出现桃心效果修改文章内链接文本样式修改文章底部的那个带#号的标签在每篇文章末尾统一添加“本文结束”标记修改作者头像并旋转博文压缩修改“代码块自定义样式侧边栏社交小图标设置主页文章添加阴影效果在网站底部加上访问量添加热度网站底部字数统计添加 README.md 文件设置网站的图标Favic
史上最全的 Hexo 博客搭建配置完全指南
云玩家
03-09 2724
欢迎到我的博客查看最新文章: https://blog.cloudplayer.site 本篇博客基于 Centos 7.x root 用户. 　　最近利用 Hexo + Github Pages 搭建了一个博客, 总体来说比较满意, 中间也踩了不少坑. 于是将我的配置过程全部记录下来, 就有了这篇博文. 　　关于 Hexo 搭建配置的博文网上还是挺多的, 但是零零散散, 这篇博文就当成是一个大合...
Hexo内嵌网页踩坑记录
nonlinearthink的博客
07-09 2291
demo 预览 首先，我先来说一说这个需求产生的原因，我前些日子更新了一些 CSS 相关的博客，但是我发现，要展示 CSS 的效果，必须要用到一些交互的功能，我必须要写一些小 demo，然后嵌入到网页中去。 一开始，我使用的就是纯粹的 HTML 代码，加上 style 和 script 标签，直接写在 .md 里面。 我意识到这不是一个好方法，一篇博客有时候需要多个 demo ，随着代码越来越多，每个 demo 之间会产生冲突，我迫切需要隔离它们。 使用 iframe 随着我的代码越来越多，我发现在一篇博客
hexo 首页文章只显示一部分
枫之木落的博客
12-08 1万+
这个只要在文章中加上<!--more--> 标记 ，该标记以后部分就不在显示了，只有展开全部才显示，这是hexo定义的。 这样每次添加这个标记有点麻烦，也可以自定义添加，不过可能会导致排版错乱，自定义配置链接https://twiceyuan.com/2014/05/25/hexo%E8%87%AA%E5%8A%A8%E6%B7%BB%E5%8A%A0readmore%E6%A0%87%E8%AE
Hexo框架下用NexT(v7.0+)主题美化博客
对方北方
03-19 2万+
前言 博主自己的博客：https://hunter1023.github.io/；按照本篇博客美化而成。 NexT主题的安装 　　顾名思义，所谓主题就是界面的展示样式。Hexo安装主题，只需要将主题文件拷贝至博客所在目录的themes目录下，修改相关配置文件即可生效。 　　NexT的安装通过定位到博客目录，再通过 　　Git clone https://github.com/theme-...
hexo的next主题个性化教程：打造炫酷网站
热门推荐
距离的博客
05-24 5万+
看到有些next主题的网站很炫酷，那么是怎么配置的呢？接下来我会讲一讲如何实现一些炫酷的效果 主要有以下32种： 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景 实现点击出现桃心效果 修改文章内链接文本样式 修改文章底部的那个带#号的标签 在每篇文章末尾统一添加“本文结束”标记 修改作者头像并旋转 博文压缩 修改“代码块自定义样式 侧边栏社交小图标设置
2018最新版Hexo博客Next主题6.0配置优化
请别抢我的狗熊
03-08 4万+
前言 或许是对默认的东西没有好感，总觉得默认的主题是很丑很丑的，完美控是接受不了这个东东的，还好hexo是可以修改主题的。这里首推NexT主题，精于心，简于形标语说的是真的不错。使用NexT主题的人比较多，这也说明这个主题确实很成熟了。优化，配置，扩展很多都集成了，比较简单。博文重质量，弄的太花哨确实没啥用。。。 读者可以在https://hexo.io/themes/可以查看...
NexT主题升级以及hexo4.2.0 NexT7.7.2主题美化
z714977076的博客
03-29 1838
NexT主题升级以及hexo4.2.0 NexT7.7.2主题美化 本文主要介绍如何对NexT7.7.2版本的一些主题美化操作 点击我的博客可以查看一下我的样式。 NexT主题升级 我觉得太痛苦了，原来用的NexT5.1.x版本，发现很多网上的东西不能用，然后就在从v5.1.x升级这个介绍进行了升级。直接升级到v7 在blog根目录下输入： git clone https://github.co...
hexo之next主题个性化配置详细教程
傻瓜的博客
06-28 1万+
hexo之next主题个性化配置详细教程1.在右上角或者左上角实现fork me on github实现的效果图 具体实现方法 点击传送门>> 挑选自己喜欢的样式，并复制代码。 例如，我是复制如下代码： 然后粘贴刚才复制的代码到 themes/next/layout/_layout.swig 文件中 <div class="headband"></div>的下面
初级网安作业笔记3
最新发布
2302_81704721的博客
07-23 106
【代码】初级网安作业笔记3。
网络初级安全第三次作业
2302_81663869的博客
07-22 454
通用容器标签，用于分组其他元素，便于通过 CSS 统一样式或通过 JavaScript 操作。一级标题标签，用于显示页面的主要标题（此处为 “账户登录”），具有语义化含义，也影响搜索引擎排名。包含 CSS 样式代码，用于控制页面元素的布局和外观（如颜色、大小、间距等）。包含 JavaScript 代码，用于实现交互逻辑（如表单验证、提交处理等）。包含页面的元数据（不直接显示在页面上的信息），如字符集、标题、样式等。定义页面标题，显示在浏览器标签页上，也用于搜索引擎索引。表单标签，用于创建用户输入表单。
【HTML】图片比例和外部div比例不一致，最大程度占满
爱喝星冰乐的博客
07-21 431
图片最大程度占满
hexo 搜索_为 hexo 博客添加本地搜索功能
05-14
为 Hexo 博客添加本地搜索功能需要进行以下几个步骤： 1. 安装 Hexo 的搜索插件：在命令行中输入以下指令进行安装。 ``` npm install hexo-generator-searchdb --save ``` 2. 修改 Hexo 的配置文件：在 Hexo 的根目录下找到 `_config.yml` 文件，添加以下配置： ``` search: path: search.xml field: post format: html limit: 10000 ``` 3. 在 Hexo 主题中添加搜索框：在 Hexo 主题中添加搜索框，并将搜索框的 `action` 属性设置为 `search.xml`。 4. 生成搜索索引文件：在命令行中输入以下指令生成搜索索引文件。 ``` hexo clean && hexo generate ``` 这个指令会清除 Hexo 的缓存，并重新生成静态文件。 5. 将搜索索引文件复制到主题目录下：在生成搜索索引文件后，将生成的 `search.xml` 文件复制到主题目录下。 完成以上步骤后，就可以在 Hexo 博客中使用本地搜索功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值