好的,现在一直在为此苦苦挣扎,我几乎拥有我想要的外观,但现在正在努力定位这些物品。基本上我想要一个在外面有笔划的笔划文本,这意味着 webkit 文本笔划是无用的。
所以我想我会把两个文本元素放在一起并这样做。这很好用,除了因为我使用的是 position:absolute 元素基本上没有高度。
HTML 如下所示:
<div class="hcontainer"
<h2>A Framework For Web Artisans</h2>
<span class="h2white">A Framework For Web Artisans</span>
</div>
像这样的CSS:
h2{font-size:2em;
margin: 10px 0;
color:#234F70;
-webkit-text-stroke: 10px #531A16;
-webkit-text-fill-color:#FFF;
letter-spacing:-2px;
position:absolute;
top:10px;
left:0px;}
.h2white{font-family:dom_bold,arial black;
font-size:2em;
margin: 10px 0;
color:#FFF;
position:relative;
top:10px; left:0px;
letter-spacing:-2px;
position:absolute;}
.hcontainer{position:relative;clear:both;height:2em;}
所以这就是问题所在。hcontainer 需要设置高度,因为它包含的元素是绝对定位的,因此没有高度并且会打乱流程。问题是使高度动态化,以便我可以适当地间隔元素。
我可以为每个标题制作一个单独的容器,但这似乎有点多。谁能想到一个更好的方法来做我在这里想做的事情?还是解决身高问题的方法?