自定义CSS给文章中的图片增加边框与阴影

看不惯四四方方的图片,想改成圆角和有阴影边框的。开始网上找插件,但是找了好久也没找到合适的,不是不兼容就是不满意。不得已,自己决定写CSS来改,用F12找到文章对应的CSS标识,最后改的很满意。所以说还是自食其力靠谱,找啥插件,就几行代码的问题,改好总结成这篇文章。

具体操作,就是到后台外观/编辑 的站点主题CSS样式表搜索entry-content,这个节点就是跟文章有关的样式,在节点下面增加以下代码即可。

/*正文图片效果*/
.entry-content img{
     box-shadow: 0 0 10px rgba(0, 0, 0, 10);
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 10);
     -moz-box-shadow: 0 0 10px rgba(0,0,0,10);
     margin: 2px 0;
     padding: 2px;
     background: #e0dfcc;
     border: 1px solid #e0dfcc;
     border-radius:10px
}

效果如下图:

当然了,如果不满意可以自己修改上面的代码。

0
去打赏

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

正在跳转到PayPal...

作者:doctorrm

链接:自定义CSS给文章中的图片增加边框与阴影

来源:编程日志

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

另外,部分文章和内容收集、整理自互联网,如有侵权,请联系博主删除。

发表评论

电子邮件地址不会被公开。 必填项已用*标注