[分享]css3文字加描边

CSS3提供了很多文本效果，其中文本描边就是其中的一种效果。文本描边可以为文本添加一个外框，使文本更加突出。下面介绍一下如何在CSS3中使用文本描边的方法。 .text{ color: blue; b...

CSS3提供了很多文本效果，其中文本描边就是其中的一种效果。文本描边可以为文本添加一个外框，使文本更加突出。下面介绍一下如何在CSS3中使用文本描边的方法。

 .text{
        color: blue;
        background-color: #ffffff;
        -webkit-text-stroke: 1px black;
        /* Safari */
        text-stroke: 1px black;
        /* 方法2，适合非WebKit浏览器 */
    } 

首先，在CSS中，我们可以使用text-stroke属性来设置文本描边的粗细和颜色。text-stroke属性目前只在WebKit浏览器中得到普遍支持，所以我们可以再加上-webkit-text-stroke属性，这样就可以达到跨浏览器的效果了。

在上面的代码中，我们可以看到，我们设置的颜色是黑色，描边宽度为1像素。如果要在文本描边时设置颜色，可以使用text-fill-color属性，设置文本的填充颜色。

 .text{
        color: blue;
        background-color: #ffffff;
        text-shadow: -1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000;
    } 

除了使用text-stroke属性，我们还可以使用text-shadow属性来达到文本描边的效果。我们可以设置四个不同方向的位置和不同颜色的阴影。下面是一个实例，在其中，我们将文本描边设置为黑色：

CSS3文本描边可以让文本更加突出，给用户留下深刻印象。使用CSS3的text-stroke或text-shadow属性可以轻松地实现文本描边效果。