我想在文字下方加上阴影，如所附图片所示。在附件中，我们可以在文本“网站”下看到阴影。我尝试使用下面的代码，但未成功。任何帮助将不胜感激。
#testbtn {
display: block;
color: #000000;
font-weight: bold;
text-align: center;
margin: 0 auto;
border: 1px solid #0098DB;
padding: 8px 8px;
background: #575857;
max-width: 200px;
border-radius: 10px;
}
.trying {
color: white;
content: "";
box-shadow: 5px 5px 5px black;
text-transform: rotateX(70deg);
}<a id="testbtn"><span class="trying">Test</span></a>我同意@natureminded。我不认为文本转换是实现此结果的最佳方法。在他们发布答案后，我正在起草这个示例，但是它遵循相同的思考过程
#testbtn {
position: relative;
display: block;
color: #000000;
font-weight: bold;
text-align: center;
margin: 0 auto;
border: 1px solid #0098DB;
padding: 8px 8px;
background:#575857;
max-width: 200px;
border-radius: 10px;
z-index: -3;
}
.trying{
position: relative;
color:white;
}
.trying:before{
content:"";
position: absolute;
width: 100%;
left: 6px;
top: 7px;
height: 110%;
background-color:rgba(0,0,0, .5);
transform: skew(35deg);
z-index:-1;
}<a id="testbtn"><span class="trying">Test</span></a>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句