欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css3可以加文字描边吗

程序员文章站 2022-01-16 08:34:52
...

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

css3可以加文字描边吗

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

text-shadow 文字描边

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

text-shadow:color||length||length||opacity
  • color:指定颜色。

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

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

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>text-shadow-文字描边</title>
		<style>
			.demo {
				height: 200px;
				text-align: center;
				font-family: Verdana;
				font-size: 30px;
				font-weight: bold;
				background: peru;
				color: #000;
			}
			
			.stroke {
				text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>没有添加描边</p>
			<p class="stroke">添加了字体描边</p>
		</div>
	</body>

</html>

css3可以加文字描边吗

text-stroke 文字描边

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

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

效果如下

css3可以加文字描边吗

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

css3可以加文字描边吗

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

css3可以加文字描边吗

那么,如何实现外描边效果呢?

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

<p class="text" data-title="为你定制 发现精彩">为你定制 发现精彩</p>

::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 的,通过 strokestroke-width来控制描边颜色和大小,比如

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

可以得到这样的效果

css3可以加文字描边吗

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

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

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

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

css3可以加文字描边吗

(学习视频分享:css视频教程

以上就是css3可以加文字描边吗的详细内容,更多请关注其它相关文章!

相关标签: css3 文字描边