文字阴影略低于文本

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