首页 > 技术文章 > 给博客园正文中的图片添加一个边框

Higurashi-kagome 2020-04-21 15:26 原文

有时候你在博客园添加的图片与网站的周围环境不搭配,比如我的主题是白色的 simpleMemory,如果我在正文中添加许多白色的图片,会发现很难知道网站上的图片边界在哪。

为解决这个问题,可以给图片标签设置边界,首先,你要选择一个合适的边界颜色,比如我觉得我主页外的灰色就不错,如图:

如何查看该颜色?在该灰色部分右击并点击检查,如图:

然后在打开的开发者模式中查看下图部分:

你会发现里面有一个background-color:#e6e6e6字样,这就是我们要找的颜色了。复制background-color后面的部分,也就是#e6e6e6,然后到博客园后台页面定制 CSS 代码中输入如下代码:

#cnblogs_post_body  img {
  border:1.5px solid #e6e6e6;
}

#e6e6e6是我们得到的颜色,#cnblogs_post_body imgcss中的意思是定位页面中 id 号为 cnblogs_post_body 的标签中的所有 img 标签,这样写是为了定位正文中的图片,我们必须先定位图片让css找到它们,然后才能在{}中设置它们的样式。

还有如果设置后觉得边界太窄,可以增大1.5px中的数字部分,比如设置成2px

接下来,选择保存:

然后页面中的图片就有一个灰色边界了:

这时你可能发现上图中的图片右边并没有显示边界,这是因为边界内边距没设置好。

页面定制 CSS 代码中添加

div#cnblogs_post_body {
    padding-right: .4em;
}

就可以了。CSS 属性 padding-right 是指一个元素在内边距区域(padding area)中右边的宽度。内边距(padding)是指一个元素的内容和边框之间的区域。

推荐阅读