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;
}

在文本下面的文本阴影

1 个答案: