Chrome插件开发(微信公众号图文编辑器):设置图片圆角和阴影

NO.1

图片样式

微信图片的默认样式

方方正正,没有立体感觉,显得比较尖锐

一样会添加圆角显得图片柔和一些,也会添加阴影和边框显示图片立体一些

当然,关于图片的动效,如旋转,位移,抖动等属于svg的内容,一般的内容用的不多

加上圆角和阴影之后的效果

NO.2

圆角和阴影

设置圆角

使用style设置border-radius属性

注意公众号无法设置css类,只能通过styl来设置样式

style="border-radius:10px"

设置阴影

使用box-shadow

同样的公众号无法使用filter:drop-shadow样式,会被过滤

style="box-shadow : 5px 5px 10px -4px #999"

通过getElementsByTagName查找当前编辑器内的img标签

然后给每个img设置style

imgDom[i].setAttribute('style', 'border-radius:10px;box-shadow : 5px 5px 10px -4px #999;')

NO.3

Tips

注意公众号不要使用<div>标签而要使用<section>标签

因为div不生效且会被过滤

END.

参考阅读