我正在尝试使用 text-shadow 此处的CSS属性为文本添加大纲。
问题是阴影角并不总是相遇。如果你往下看,你可以在 Y 的右上角看到问题。
使用这种字体看起来还不错,但对于我的代码使用的一些字体,它会产生很大的不同。
有没有办法让文本完全被 box-shadow 包围,尤其是在角落里?
.shadowOutline {
font: normal 200pt Arial;color: #fff;
text-shadow:
-1px 1px #ff0000,
-1px -1px #ff0000,
1px 1px #ff0000,
1px -1px #ff0000,
-2px 2px #ff0000,
-2px -2px #ff0000,
2px 2px #ff0000,
2px -2px #ff0000;
-webkit-font-smoothing: antialiased;
}Run Code Online (Sandbox Code Playgroud)
<div class="shadowOutline">My</div>Run Code Online (Sandbox Code Playgroud)
我试图绘制一条水平线约40%的宽度,然后显示一个字体真棒图标,然后再次显示剩下的40%.以下显示了我到目前为止所拥有的内容.但你可以看到https://jsfiddle.net/hyo0ezeo/,它与我描述的任何地方都不相符.有人请指出正确的方法吗?
CSS
h2 {
width: 30%;
text-align: center;
border-bottom: 1px solid red;
line-height: 0.1em;
margin: 10px 0 ;
}
Run Code Online (Sandbox Code Playgroud)
HTML
<div>
<h2>
<span class="fa fa-arrows-alt" aria-hidden="true" style="margin:10px 0"></span>
</h2>
</div>
Run Code Online (Sandbox Code Playgroud)