html border阴影效果_[每日一技]给编辑器里图片统一加阴影和圆角代码

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

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

<script>  function imgTagAddStyle(htmlstr){    //正则匹配所有img标签    //var regex0 = new RegExp("(i?)(\]+\>)","gmi");    //正则匹配不含style="" 或 style='' 的img标签    var regex1 = new RegExp("(i?)(\]+\>)","gmi");    //给不含style="" 或 style='' 的img标签加上style=""    htmlstr = htmlstr.replace(regex1, "$2 style=\"\"$3");    console.log("增加style=\"\"后的html字符串："+htmlstr);    //正则匹配含有style的img标签    var regex2 = new RegExp("(i?)(\]+\>)","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 = "

are you ok?

hellothe我是大神

"; console.log("原始html字符串："+str0); var s = imgTagAddStyle(str0); document.getElementById("demo").innerHTML=s;script>

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

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

border-radius是给img图片加圆角，boject-fit:对图片进行剪切，保留原始比例,box-shadow对图片增加阴影。

具体的效果如下图：

文章推荐 程序员摆地摊能接到活吗？码农地摊卖什么能挣到外快钱？ 分享几个获取灵感创意的网站 广告 方案 设计 短视频创意 地摊经济资料大全 摆地摊的学问 从零开始跟着老炮学摆地摊 【跟着磊哥开发博客】第一篇 前后台模板选用 及开发框架下载

你不是一个人战斗，欢迎加小编微信：xnynews 加入500人微信群,(备注：云码素材入群)，一起学习，

欢迎关注云码素材，交流分享! 云码素材原创作品，更多精品资源下载，技术分享请关注，私信云码素材！