Hugo图片添加阴影和圆角

2022-02-20 约 291 字预计阅读 1 分钟次阅读

为文章的图片添加阴影和圆角效果。

博客基于Hugo搭建，主题是LoveIt

主题自身并没有对图片进行美化，原始的样式

之前写作是在微信公众号，配合壹伴插件，也能对图片进行美化，设置圆角和阴影等等。看起来挺舒服的

用开发者工具查看其样式，直接照搬

1
2
3
4


.imgShadow {
    box-shadow:rgb(210, 210, 210) 0em 0em 0.5em 0px;
    border-radius:6px;
}

在Hugo根目录assets下新建/assets/css/_custom.scss样式文件

1
2
3
4
5
6
7
8
9


// ==============================
// Custom style
// 自定义样式
// ==============================
// 公众号文章图片阴影和圆角
.jf-image-shadow {
	box-shadow:rgb(210, 210, 210) 0em 0em 0.5em 0px;
	border-radius:6px;
}

之后在写文章时再进行引用

1
2
3


<center>
    <img class="jf-image-shadow" src="/images/still-image/limei.png" title="石原里美" alt="图片-石原里美" height="100%" />
</center>

效果如下

本文作者：正阳

本文链接：Hugo图片添加阴影和圆角