html - 如何将 3D 效果应用于 HR 标签

Question

我正在尝试为“hr”标签添加 3D 样式，但我对我的 CSS 不满意。请给我一个想法，抱歉我的英语不好。

hr{
  color:red;
  box-shadow:3px 3px 3px red;
}

<h1>3D Style</h1>
<hr/>

Answer 1

我创造了这个

hr {
  margin-top:50px  
}

hr.one {
  border-color:red;
  box-shadow:2px 2px 0px pink;
}

hr.two {
  border:4px solid red;
  box-shadow:4px 4px 0px pink;
}

hr.three {
  border:4px solid red;
  box-shadow:4px 4px 4px pink;
}

<h1>3D Style</h1>

<hr class="one"/>
<hr class="two"/>
<hr class="three"/>