[分享]css中如何给文字描边

CSS中，我们可以通过textstroke属性来给文字描边，这个属性只能在Webkit浏览器中使用。 / 给文字描边 / textstroke: 2px 000; 这个属性有两个值：描边宽度和描边颜色...

CSS中，我们可以通过text-stroke属性来给文字描边，这个属性只能在Webkit浏览器中使用。

 /* 给文字描边 */
    text-stroke: 2px #000; 

这个属性有两个值：描边宽度和描边颜色。其中，描边宽度支持像素（px）和百分比（%）两种单位，而描边颜色可以使用颜色名称、RGB值、HEX值、HSL值等不同方式进行设置。下面是一些例子：

 /* 5像素宽度黑色描边 */
    text-stroke: 5px #000;

    /* 百分比宽度橙色描边 */
    text-stroke: 1% #FFA500;

    /* 使用RGB值指定颜色的描边 */
    text-stroke: 3px rgb(255, 0, 0);

    /* 使用HEX值指定颜色的描边 */
    text-stroke: 2px #00FF00;

    /* 使用HSL值指定颜色的描边 */
    text-stroke: 4px hsl(240, 100%, 50%); 

需要注意的是，text-stroke属性只能在Webkit浏览器中使用，而其他浏览器则不支持此属性。如果需要实现给文字描边的效果，可以使用text-shadow属性来模拟，这个属性是CSS标准属性，被大多数浏览器所支持。下面是一个使用text-shadow模拟的例子：

 /* 使用text-shadow模拟描边 */
    text-shadow: -1px -1px 0 #000,  
                  1px -1px 0 #000,
                 -1px  1px 0 #000,
                  1px  1px 0 #000; 

这里使用了四个text-shadow属性组合起来模拟描边，它们分别是左上、右上、左下、右下放置的阴影，通过这些阴影可以产生出文字描边的效果。