Summary of research on using JS to achieve shadow effects on web page elements_javascript skills

Two days ago, I wanted to add a shadow effect to an element for a small project, but I remember reading the article "Using Div/CSS to simulate shadow effects" written by an expert, and I still have a little impression. The idea is very simple, mainly using The shadow effect is achieved by positioning offsets of several layers, so I wondered if it could be encapsulated into a js function so that it could be easily called on each html object.
I thought it was very simple at first, but I did encounter many problems during the implementation process. The most serious one was the browser compatibility issue. It took me a whole night and half an overnight to get it done, sweat! However, this little thing gave me a deeper understanding of the differences and solutions between js and some browsers.
Summary it here for future reference!
The code is as follows:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> *{ margin:0px; } #msgdiv{ border:1px solid #d3d3d3; text-align:center;font-size:12px; width:150px;line-height:50px; background:#f7f7f7;color:#f00; } .content{ border:1px solid #999; background:#f0f0f0; width:150px;height:50px; } </style> <p id="ddd" onclick="alert(document.body.innerHTML);"> </p>kkkkk<div style="position:absolute;left:200px;top:250px;width:150px;height:150px;border:1px solid #f00" id="go"> </div>safasdf<div class="content" id="test"> </div>dsfgsdfg<div id="add" style="border:1px solid #000;background:#fff"> </div>aaaaaaaaaaaaaaaaaaa<img src="pic001.jpg" id="img" alt="">