宜宾网站建设公司

css3怎么加文字描边

这篇文章主要介绍“css3怎么加文字描边”，在日常操作中，相信很多人在css3怎么加文字描边问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3怎么加文字描边”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联于2013年创立，先为永年等服务建站，永年等地企业，进行企业商务咨询服务。为永年企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

css3可以加描边，方法：1、使用text-shadow属性，通过给文字周围添加文字阴影来实现描边效果；2、使用text-stroke属性，语法“text-stroke:描边宽度 颜色;”；3、利用SVG给文字加描边。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

text-shadow 文字描边

text-shadow:向文本设置阴影。

text-shadow:color||length||length||opacity

  • color:指定颜色。

  • length:第一个length指定阴影在水平方向上的延伸距离，第二个length指定阴影在垂直方向上的延伸距离，可以为负值。

  • opacity:指定阴影模糊效果的作用距离。

用逗号分隔的4个属性值代表的方向顺序为右下左上。




	
		
		text-shadow-文字描边
		
	

	
		
			
没有添加描边

			添加了字体描边

css3怎么加文字描边

text-stroke 文字描边

CSS 中有个专门用于文字描边的属性 -webkit-text-stroke，可以控制描边的宽度和颜色，比如

.text{
  -webkit-text-stroke: 2px #333;
}

效果如下

css3怎么加文字描边

确实有描边了，但是文字好像瘦了一圈，如果觉得不太明显，可以再设置大一点

css3怎么加文字描边

从这里可以看出，-webkit-text-stroke其实是 居中描边，并且是覆盖在文本上的，也无法更改描边方式。而事实上，很多设计工具都是可以选择描边方式的，比如 figma

css3怎么加文字描边

那么，如何实现外描边效果呢？

也是可以的！用两层文本，一层文本描边，一层文本渐变就可以了，为了节省标签，可以用伪元素来生成

为你定制 发现精彩

::before设置渐变，位于上方，原文本设置描边，位于下方，注意把 ::before的-webkit-text-stroke去除

.text::before{
    content: attr(data-title);
    position: absolute;
    background-image: linear-gradient(#FFCF02, #FF7352);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
}
.text{
    -webkit-text-stroke: 6px #333;
}

叠加示意如下

css3怎么加文字描边

改变不同的描边也不会出现文字“变瘦”的情况

css3怎么加文字描边

SVG 文字描边

SVG 也可以实现描边效果，和 CSS 比较类似，应该说 CSS 是借鉴 SVG 的，通过 stroke 和 stroke-width来控制描边颜色和大小，比如

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
}

可以得到这样的效果

css3怎么加文字描边

和 CSS 表现一样，都是居中描边，也无法改变。

不一样的是，SVG 控制更为灵活，默认是先填充、然后再描边，所以看着是描边在填充之上，但是，我们可以改变这种规则，设置先描边，再填充，那么填充的颜色就会覆盖在描边之上了。SVG 中改变这种规则的可以通过 paint-order来设置。

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描边*/
}

这样就实现了外描边效果，是不是比 CSS 方便许多？

css3怎么加文字描边

到此，关于“css3怎么加文字描边”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


分享题目：css3怎么加文字描边
标题URL：http://ybzwz.com/article/gddcde.html

其他资讯