css中如何给文字描边

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中,我们可以通过text-stroke属性来给文字描边,这个属性只能在Webkit浏览器中使用。 /* 给文字描边 */ text-stroke: 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属性组合起来模拟描边,它们分别是左上、右上、左下、右下放置的阴影,通过这些阴影可以产生出文字描边的效果。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中如何给文字描边

粉丝

0

关注

0

收藏

0

已有0次打赏