JS を使用して Web ページ要素に影の効果を実現するための研究の概要_JavaScript スキル

2 日前、小さなプロジェクトで要素に影の効果を追加したいと思ったのですが、専門家が書いた「Div/CSS を使用して影の効果をシミュレートする」という記事を読んだのを覚えており、そのアイデアは今でも少し印象に残っています。は非常に簡単で、主に使用します。シャドウ効果は複数のレイヤーのオフセットを配置することで実現されるため、各 HTML オブジェクトで簡単に呼び出せるように js 関数にカプセル化できないか考えました。
最初はとても簡単だと思いましたが、実装プロセス中に多くの問題に遭遇しました。最も深刻なのはブラウザの互換性の問題でした。完了するまでに一晩半かかりました。しかし、この小さなことで、js と一部のブラウザーの違いと解決策をより深く理解することができました。
今後の参考のためにここにまとめます。
コードは次のとおりです:

<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>