请用 webkit 浏览器查看！

思路如下：

例子 1

-webkit-text-stroke: 2px #000;

例子 2,3,4,5

多个 text-shadow 重叠，上下左右＋阴影（例子2）或者 反复加 text-shadow: 0 0 4px black, 0 0 4px black, 。。。

例子 6

复制并偏移一点

:after {content:’css text stroke 文字边框’;position: absolute;left:-2px;top:-2px;}

例子 7,8

stroke+镂空 -webkit-text-fill-color: transparent;

例子 8 阴影渐变

例子 9

复制并放大、偏移

-webkit-transform:scale(.9,.9);left:-2px;top:-1px;

查看css代码 查看html代码 Demo

<div id="css-stroke-container">
    <div class="cssstroke1">css text stroke 文字边框</div>
    <div class="cssstroke2">css text stroke 文字边框</div>
    <div class="cssstroke3">css text stroke 文字边框</div>
    <div class="cssstroke4">css text stroke 文字边框</div>
    <div class="cssstroke5">css text stroke 文字边框</div>
    <div class="cssstroke6">css text stroke 文字边框</div>    
    <div class="cssstroke7">css text stroke 文字边框</div>
    <div class="cssstroke8">css text stroke 文字边框</div>
    <div class="cssstroke9">
        <span data-t="C">c</span><span data-t="S">s</span><span data-t="S">s</span> <span data-t="T">t</span><span data-t="E">e</span><span data-t="X">x</span><span data-t="T">t</span> <span data-t="S">s</span><span data-t="T">t</span><span data-t="R">r</span><span data-t="O">o</span><span data-t="K">k</span><span data-t="E">e</span> <span data-t="文">文</span><span data-t="字">字</span><span data-t="边">边</span><span data-t="框">框</span>
    </div>
</div>