如何将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"/>

Answer 2

这将是经典的3D HR（您可以调整它以满足您的需求）：

hr{
  width: 100%;
  height: 1px;
  background: #DFDFDF;
  margin: 20px 0;
  display: block;
  border: none;
}

<hr>