为 Hexo 文章块添加阴影

最新推荐文章于 2022-08-01 18:58:48 发布

「已注销」

最新推荐文章于 2022-08-01 18:58:48 发布

阅读量542

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_43284098/article/details/105148963

本文介绍如何使用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里有全面的阴影的用法

MDN-box-shadow

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Hexo-悬挂灯笼

唐先森的博客

05-22

1058

文章链接：Hanging lanterns | 唐志远の博客标题之前有小伙伴留言问我博客悬挂灯笼如何实现的，现在写一篇简单的教程。悬挂灯笼效果效果如下： PC端 Mobile端步骤新建CSS样式在 themes\Butterfly\source\css 文件下新建 CSS 文件，并命名为 lantern.css ( 当然名字随便取，只要在主题配置文件中引入对应的 CSS文件即可 )，将以下代码复制到新建的 lantern.css 中。 /* 灯笼 Start */

Hexo 美化优化配置（持续更新）

jieruis的博客

01-23

2159

文章目录添加网站运行时间添加文章边框阴影效果在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的next主题个性化教程：打造炫酷网站

热门推荐

距离的博客

05-24

5万+

看到有些next主题的网站很炫酷，那么是怎么配置的呢？接下来我会讲一讲如何实现一些炫酷的效果主要有以下32种：在右上角或者左上角实现fork me on github 添加RSS 添加动态背景实现点击出现桃心效果修改文章内链接文本样式修改文章底部的那个带#号的标签在每篇文章末尾统一添加“本文结束”标记修改作者头像并旋转博文压缩修改“代码块自定义样式侧边栏社交小图标设置

hexo博客的背景设置

Faith的博客

07-25

1万+

主要有以下30种：在右上角或者左上角实现fork me on github添加RSS添加动态背景实现点击出现桃心效果修改文章内链接文本样式修改文章底部的那个带#号的标签在每篇文章末尾统一添加“本文结束”标记修改作者头像并旋转博文压缩修改“代码块自定义样式侧边栏社交小图标设置主页文章添加阴影效果在网站底部加上访问量添加热度网站底部字数统计添加 README.md 文件设置网站的图标Favic

史上最全的 Hexo 博客搭建配置完全指南

云玩家

03-09

2727

Hexo内嵌网页踩坑记录

nonlinearthink的博客

07-09

2291

demo 预览首先，我先来说一说这个需求产生的原因，我前些日子更新了一些 CSS 相关的博客，但是我发现，要展示 CSS 的效果，必须要用到一些交互的功能，我必须要写一些小 demo，然后嵌入到网页中去。一开始，我使用的就是纯粹的 HTML 代码，加上 style 和 script 标签，直接写在 .md 里面。我意识到这不是一个好方法，一篇博客有时候需要多个 demo ，随着代码越来越多，每个 demo 之间会产生冲突，我迫切需要隔离它们。使用 iframe 随着我的代码越来越多，我发现在一篇博客

Hexo-inside主题-背景全透明

12-14

Hexo，inside主题，简体中文hans，放在themes\inside\source目录下。背景全透明

2018最新版Hexo博客Next主题6.0配置优化

请别抢我的狗熊

03-08

4万+

前言或许是对默认的东西没有好感，总觉得默认的主题是很丑很丑的，完美控是接受不了这个东东的，还好hexo是可以修改主题的。这里首推NexT主题，精于心，简于形标语说的是真的不错。使用NexT主题的人比较多，这也说明这个主题确实很成熟了。优化，配置，扩展很多都集成了，比较简单。博文重质量，弄的太花哨确实没啥用。。。读者可以在https://hexo.io/themes/可以查看...

hexo之next主题个性化配置详细教程

傻瓜的博客

06-28

1万+

hexo之next主题个性化配置详细教程1.在右上角或者左上角实现fork me on github实现的效果图具体实现方法点击传送门>> 挑选自己喜欢的样式，并复制代码。例如，我是复制如下代码：然后粘贴刚才复制的代码到 themes/next/layout/_layout.swig 文件中 <div class="headband"></div>的下面

hexo 首页文章只显示一部分

枫之木落的博客

12-08

1万+

这个只要在文章中加上 标记，该标记以后部分就不在显示了，只有展开全部才显示，这是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 主题博客个性化配置超详细，超全面(两万字)

Z小旋

03-10

4万+

隐藏网页底部 powered By Hexo / 强力驱动打开 themes/next/layout/_partials/footer.swig 找到： {% if theme.footer.powered.enable %} <div class="powered-by">{# #}{{ __('footer.powered', '<a class="theme-link" ...

（二）Hexo-个人之博客主题美化

weixin_45682081的博客

03-10

1421

本文以作者blinkfox的matery主题为例，对主题的部分地方进行优化，进行了一些美化。没有博客？ Github + Hexo 搭建个人博客超详细教程获取我配置好的主题？ git@github.com:MUYIio/Hexo-matery-Themes.git 须知：不同的Hexo主题的美化方式可能存在一些差异，但也相差无几，把源代码放在合适的位置就可以。前提条件：进行博客主题美化...

hexo关于next主题scroll_to_more失效

野生的世界

03-26

974

网上搜好久没找到，记录一下，老版本有，新版本没有了 # Automatically scroll page to section which is under  mark. scroll_to_more: false 最新版本已经移除此选项，官方认为scroll_to_more是个默认行为for任何hexo主题强制修改\themes\next\layout...

【主题美化系列】NexT7主题添加背景图片

kris的博客

03-31

1163

此文，我只能说：“授人与鱼不如授人以渔”，你怎么看？

next主题美化——背景图片、页面透明化、阴影、圆角、动画

Growing_potato的博客

02-22

4956

本文首发于我的个人博客前言：NexT 主题本身是没有背景图片的，显得有点单调，博主觉得没有背景图片显得我的博客很丑，于是就想添加一个背景图片 next版本：8.2.1 添加背景图片把想设置的背景放入./themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下新建文件夹_data与style文件source/_data/styles.styl，输入以下代码 body { background:url(/images/backgroun.