[分享]css3描边点不同颜色

CSS3允许我们为文字和图案添加描边，我们可以通过border属性来实现。然而，有时候我们希望描边的点有不同的颜色，这该怎么办呢？下面我们来看一下具体的实现方法。 .border{ border: 2...

CSS3允许我们为文字和图案添加描边，我们可以通过border属性来实现。然而，有时候我们希望描边的点有不同的颜色，这该怎么办呢？下面我们来看一下具体的实现方法。

 .border{
        border: 2px solid rgba(255,255,255,0.7);
        -webkit-text-stroke: 2px #FF0000; /* Safari/Chrome浏览器 */
        text-stroke: 2px #FF0000; /* IE浏览器 */
    } 

在上面的代码中，我们使用了border属性为元素添加一层2px宽度、白色透明度为0.7的描边。同时，我们还使用了-webkit-text-stroke和text-stroke属性为文字添加描边，并设置了描边宽度为2px和颜色为红色。

需要注意的是，-webkit-text-stroke只适用于Safari和Chrome浏览器，而text-stroke则只适用于IE浏览器。如果要完美支持各种浏览器，我们可以结合使用这两个属性。

通过以上方法，我们就可以实现不同颜色的描边点。让我们欣赏一下实际效果：

以上就是实现CSS3描边点不同颜色的方法，希望对大家有所帮助！