我们在后台编辑器添加内容的时候，需要上传多张图片，为了美化这些图片显示效果，想起了给图片增加阴影和圆角，由于图片是在后台编辑上传的，没办法直接定义样式，后面想到两种解决方案，分享一下。

一种解决方案就是通过写js或jquery代码，然后配合着正侧表达式，用正侧表达式查找你内容里的Img图片，再用jquery或js代码给img添加css代码即可，具体的代码如下：

<script type="text/javascript">
            function imgTagAddStyle(htmlstr){
		//正则匹配所有img标签
		//var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)","gmi");
		//正则匹配不含style="" 或 style='' 的img标签
		var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)","gmi");
		//给不含style="" 或 style='' 的img标签加上style=""
		htmlstr = htmlstr.replace(regex1, "$2 style=\"\"$3");
		//console.log("增加style=\"\"后的html字符串："+htmlstr);
		//正则匹配含有style的img标签
		var regex2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)","gmi");
		//在img标签的style里面增加css样式(这里增加的样式：display:block;max-width:100%;
          //height:auto;border:5px solid red;)
		htmlstr = htmlstr.replace(regex2, "$2display:block;max-width:100%;
                              height:auto;border:5px solid red;$3");
		//console.log("在img标签的style里面增加样式后的html字符串："+htmlstr);
		return htmlstr;
	    }
        var str0 = "<div style=\"background-color:green;width:500px;\">
        <p>are you ok?</p><img style=\"border:1px solid #ff0000;\" 
src=\"https://iph.href.lu/100x100\" alt=\"\" />hello<span>the
          <IMG src='https://iph.href.lu/100x100'></span><span style=\"font-size:20pt;\">
        我是大神</span></div>";
	console.log("原始html字符串："+str0);
	var s = imgTagAddStyle(str0);
	document.getElementById("demo").innerHTML=s;

另外一种解决方案是，直接使用CSS代码全局样式，具体方法是，先给外部一个class标签，再给这个标签下的img 全局定义一个样式，也能解决，这种方案更简单，更好用，具体的代码如下 ：

/*内容图片加阴影*/
.article_content img{ border-radius: 5px 5px 5px 5px;object-fit: contain;box-shadow: 
#84A1A8 0px 10px 15px;}

入群分享

我要加群：资源共享的时代，不要再单打独斗！加小编微信号加入群：xnynews(备注：云码素材入群)，qq群号：202498279,一起技术学习，资源分享！