css3 文字加描边

在CSS3中，我们可以使用text-stroke属性为文字添加描边效果。这个属性接收两个值，第一个是描边的宽度，第二个是描边的颜色。

    .text {
        -webkit-text-stroke: 1px #000;
        text-stroke: 1px #000;
    }

在上面的代码中，我们使用了-webkit-text-stroke和text-stroke两种不同的写法，这是因为目前不同浏览器对这个属性的支持还不一致。

值得注意的是，在使用text-stroke属性时，文字颜色并不会被覆盖，因此需要设置文字颜色和描边颜色的对比度，才能让描边效果更加明显。

    .text {
        color: #fff;
        -webkit-text-stroke: 1px #000;
        text-stroke: 1px #000;
    }

除了固定的描边宽度和颜色外，我们还可以通过以下代码实现根据鼠标悬停改变描边颜色的效果。在这里我们使用了:hover伪类。

    .text {
        color: #fff;
        -webkit-text-stroke: 1px #000;
        text-stroke: 1px #000;
    }

    .text:hover {
        -webkit-text-stroke: 1px #f00;
        text-stroke: 1px #f00;
    }

总之，text-stroke属性是CSS3中一个非常有趣的文本效果，可以让我们实现很多有趣的效果。但需要注意兼容性和对比度等问题，才能让效果更加完美。