-webkit-text-stroke实践

最新推荐文章于 2024-06-28 23:47:12 发布

远山眉

最新推荐文章于 2024-06-28 23:47:12 发布

阅读量3k

点赞数 2

本文链接：https://blog.csdn.net/qq_43553067/article/details/89528833

版权

挂一个网站可以查看属性的可用
https://caniuse.com/#search=text-stroke

一、text-stroke 是 text-stroke-width 和 text-stroke-color 的合体

描边宽度和描边颜色只能实现描边，不支持点线或者虚线

二、与border比较

对于text-stroke属性，我们无法指定描边的类型，只能是实线描边，不支持点线或者虚线，也无法指定描边是外描边还是内描边还是居中描边。
宽度的默认值不一样。border-width的默认值是medium，最终表现等同于设置3px，但是text-stroke-width的默认值确是0，这就意味着，当我们使用text-stroke属性的时候，描边宽度是必不可少的，颜色理论上可以不设置

但是由于颜色缺省的时候会使用文字的color作为描边色，导致最终的效果只是单纯的文字变得更壮实了，已然不是描边效果了

如上图所示，
第一行文字是未进行描边属性设置
第二行文字进行描边，但没有设置颜色。颜色缺省会使用文字的color作为描边色
第三行文字使用红色 2px 进行描边…

三、 -webkit-text-stroke是外描边，内描边还是居中描边

是居中描边哦~~~

<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		p{
			font-size: 40px;
		}
		.stroke{
			-webkit-text-stroke:2px red;	
		}
		.doubleStroke{
			position: relative;
			z-index:0;
		}
		.doubleStroke::before{
			/*content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。*/
			 content: attr(data-text);
    		 position: absolute;
    		 -webkit-text-stroke: 2px red;
    		 z-index: -1;
		}
</style>
<body>
	<p class="noStroke">没有描边</p>
	<p class="stroke">描边</p>
	<p class="doubleStroke" data-text="重叠描边">重叠描边</p>
</body>

效果如下
在这里插入图片描述
如果text-stroke是外描边，则上图最后两行文字红色部分大小应该是一样的；如果text-stroke是内描边，则最后文字重叠的时候，红色边框应该是看不见的；而最终的结果是，最后两行红色边框大小不一，差不多一半大小的样子，由此可以说明text-stroke是居中描边效果。

四、text-shadow与文字的外描边效果

如果想要有文字的外描边效果，可以使用CSS3 text-shadow属性模拟，兼容IE10+，例如：

<p class="shadowStroke">1px红色外描边</p>
.shadowStroke{
	/*水平阴影的位置 垂直阴影的位置 颜色*/
	text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;
}

显示
在这里插入图片描述

与上面重叠描边的不同是，
在这里插入图片描述
四面阴影叠加四个角存在空隙。如果对外描边效果比较苛刻，可以使用-webkit-text-stroke描边文字和非描边文字相互重叠覆盖的方法模拟。

技巧在于-webkit-text-stroke描边文字的描边宽度是要实现的外描边效果宽度的2倍，也就是重叠描边。。

五、-webkit-text-stroke与多重描边效果

text-shadow属性值可以不断累加，但是text-stroke属性却不行，如果想要实现多重描边效果，可以借助伪元素多层叠加模拟。

	<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		p{
			-webkit-text-stroke: 1px #fff;
    		font-size: 40px;
    		position: relative;
    		z-index: 0;
		}
		p::before,p::after{
			 content: attr(data-text);
    		 position: absolute; 
    		 left: 0;
    		 z-index: -1;
		}
		p::before{
			-webkit-text-stroke:7px yellow;

		}
		p::after{
			-webkit-text-stroke:4px red;
		}
	</style>
	<body>
	<p data-text="多重描边">多重描边</p>
</body>

在这里插入图片描述

远山眉

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
-webkit-text-stroke实践

挂一个网站可以查看属性的可用https://caniuse.com/#search=text-stroketext-stroke 是 text-stroke-width 和 text-stroke-color 的合体描边宽度和描边颜色只能实现描边，不支持点线或者虚线与border比较对于text-stroke属性，我们无法指定描边的类型，只能是实线描边，不支持点线或者虚线，...
复制链接

扫一扫