为了给文本和标题添加边框,我使用text-shadow
并添加了多个阴影来模拟这种效果:
div {
font-family:verdana;
font-size:50px;
color:white;
text-shadow: 1px 0px 0px black,
0px 1px 0px black,
-1px 0px 0px black,
0px -1px 0px black;
}
<div>TEXTO CON BORDE</div>
如果边框是单个像素,则此方法效果很好,但如果边框较厚,则效果不佳,因为您必须添加更多阴影并且仍然会在字母的角落看到跳跃:
div {
font-family:verdana;
font-size:50px;
color:white;
text-shadow: 3px 0px 0px black,
0px 3px 0px black,
-3px 0px 0px black,
0px -3px 0px black;
}
<div>TEXTO CON BORDE</div>
我的问题:有没有办法解决这个问题?(除了添加更多阴影)。如果可能的话,让它成为一种适用于所有主要浏览器并且是标准的方法(我知道它存在,text-stroke
但它在 IE/Edge 或 Firefox 中不起作用,而且它不是标准的)。
据我所知,预计
text-stroke
大多数浏览器都支持它。同时有一个替代解决方案,使用SVG内联。例子:
根据评论:
我做了几次测试,我发现适应高度的最佳选择是在元素上使用viewBox和
height
100%。眼睛!这是与不可互换的解决方案
text-stroke
,因为例如仅更改段落中一个单词的样式是不可行的。到目前为止,最接近的解决方案是与
text-shadow
一个家庭一起,sans-serif
您可以获得有趣的效果。迄今为止,没有适用于所有浏览器的“完美”解决方案。正如我在网站http://caniuse.com/#search=text-stroke上看到的,Firefox、Internet Explorer、Edge 和 Opera Mini 都不支持
text-stroke
.您使用的解决方案
text-shadow
是推荐的最接近的解决方案,但正如您已经测试过的那样,它只有在边框的厚度为 时才能正常工作1px
,如果它更大,则在字母的角处没有很好地定义边框。