웹페이지 요소_자바스크립트 기술에 그림자 효과를 얻기 위해 JS를 사용하는 방법에 대한 연구 요약

이틀 전 소규모 프로젝트의 요소에 그림자 효과를 추가하고 싶었는데 전문가가 쓴 "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>