html - 文本正下方的文本阴影

Question

我的页面是这样的:

<h1 class="page-header">Some text</h1>

CSS 是:

font-size: 60px;
text-transform: uppercase;
text-align: center;
color: #61430c;
font-weight: 700;
margin: 0 0 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: -webkit-linear-gradient(-89deg, #7D570F 38%, #452E00 56%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

是否可以在文本下方添加阴影，只是为了看起来像简单的模糊线？谢谢。

Answer 1

您不会轻易实现这一目标。我的建议是使用 ::after 伪元素在文本下方添加一个模糊的椭圆/椭圆(这里是 Fiddle )。

.page-header::after {
    content: '';
    display: block;
    width: 383px;
    height: 6px;
    background: rgba(0,0,0,.1);
    box-shadow: rgba(0,0,0,.1) 0px 0px 7px;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 400px / 10px;
    margin: 0 auto;
    position: relative;
    bottom: 17px;
}

.page-header {
    font-size: 60px;
    text-transform: uppercase;
    text-align: center;
    color: #61430c;
    font-weight: 700;
    margin: 0 0 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: -webkit-linear-gradient(-89deg, #7D570F 38%, #452E00 56%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}