CSS实现文字描边

CSS实现文字描边可以分为以下几种情况：

1、单一背景色css:

.color{
  background-color: #ff0000;
  -webkit-background-clip: text;
  -webkit-text-fill-color:#ffffff;
  -webkit-text-stroke:6px transparent;
  font-size: 100px;
  width: 50%;
  margin: 100px auto;
}

效果图：

2、背景渐变色css:

.color{
  background:-webkit-linear-gradient(red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color:#ffffff;
  -webkit-text-stroke:6px transparent;
}

效果图：

3、背景图片css: 

.color{
  background:url(../new/Images/20220618/banner1.jpg);
  -webkit-background-clip: text;
  -webkit-text-fill-color:#ffffff;
  -webkit-text-stroke:6px transparent;
}

效果图：

具体代码分析：

以上三种不同的描边方式主要依靠background的不同写法，可以是颜色值、渐变色、图片等

如果需要改变字体颜色可以修改：-webkit-text-fill-color:#ffffff; 其中颜色值