放置包含文本的div边框（带固定显示）

Question

这就是我所拥有的：

但是，我希望文本下方的阴影不会出现在边框的顶部。当我的标题的“位置”被设置为“绝对”或“固定”以外的任何东西时，我可以得到这种效果，但是我在动画中失去灵活性......这是我以后想要做的。

这是我的代码：

.feature {
height: 300px;
width: 100%;
background-image: url("http://conceptartworld.com/wp-content/uploads/2013/06/The_Last_of_Us_Concept_Art_Crows_JS-01.jpg");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
border-bottom: solid 5px #FFFFFF;
box-shadow: 0 2px 10px #333;
}

.feature h1 {
position: fixed;
font-size: 120px;
vertical-align: text-bottom;
color: #FFFFFF;
margin-left: 50px;
font-family: "oswald", sans-serif;
font-weight: 400;
text-transform: uppercase;
text-shadow: 4px 4px 5px rgba(0,0,0,0.5);
transition: margin 0.5s;
}

#moral {
margin-top: 160px;
} 

#studios {
margin-top: 160px;
margin-left: 400px;
}

同样......我的垂直对齐文字底部不起作用...这就是我使用上边距的原因..谁能告诉我为什么？

阿尔曼

Answer 1

我认为如果不将边框线设为独立元素，则无法实现此效果。 将其实现为<hr/>并将其设置为大于文本的z-index。