导航首页 » 文章首页 » 站长技术 » CSS实现文字描边

CSS实现文字描边

2023-03-09 372 站长技术

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; 其中颜色值


上一篇
417

JavaScript计算出两个数的差值并输出