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