h5字体同时添加描边，渐变，阴影效果

最新推荐文章于 2024-08-19 10:30:38 发布

纷念sama

最新推荐文章于 2024-08-19 10:30:38 发布

阅读量975

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/greatwo2/article/details/127995458

版权

效果图
请添加图片描述
代码

<text class="title" data-content="Rules">Rules</text>

<style>
.title {
		font-size: 30px;
		font-weight: bold;
		/* 设置描边宽度及颜色 默认为字体内外描边 */
		text-stroke: 2px #fff;
		/* 兼容Webkit(Chrome/Safari) */
		-webkit-text-stroke: 2px #fff;
		/* 文本阴影 */
		text-shadow: 1px 2px 4px #21049c;
	}
	
	[data-content]::before {
		/* 获取元素的属性值 */
		content: attr(data-content);
		position: absolute;
		/* 如果觉得描边粗了可以加上这段 */
		text-stroke: 0;
		-webkit-text-stroke: 0;
		/* 文本渐变色 */
		color: transparent;
		background-image: linear-gradient(to bottom, red, yellow);
		-webkit-background-clip: text;
		
		text-shadow: none;
	}
	</style>