css怎么实现字体描边效果?

css怎么实现字体描边效果?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

CSS3 中有text-stroke属性,加上-webkit-前缀兼容性也还不错,但是只有在字体很大的时候才能看到描边效果,如果字体比较小,描边颜色会遮住文字本身颜色。

上图为黑色字体白色描边,字体颜色被遮盖

当然text-stroke也有hack的方法来实现阴影,那就是先设置font-size为一个比较大的值,再进行scale操作。

还有第二种方法,我们可以通过字体阴影text-shadow实现文字描边效果

text-shadow:2px 2px 0px #fff

但是描边比较细,并且阴影是单方向的,我们可以添加对称方向的阴影:

如果觉得文字描边不够粗,可以使用多重字体阴影,这样就可以比较粗的描边

1px 1px 0px #FFFFFF, -1px -1px 0px #FFFFFF, 2px 2px 0px #FFFFFF, -2px -2px 0px #FFFFFF, 3px 3px 0px #FFFFFF, -3px -3px 0px #FFFFFF

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			@import url(https://fonts.googleapis.com/css?family=Bangers);
			body {
				font-size: 50%;
				line-height: 1;
			}
			
			.demo1 {
				font: 8em/1 Bangers, sans-serif;
				text-align: center;
				text-shadow: 
				/* These four shadows create the most outer stroke */
				-.025em -.025em 0 #444, 
				.025em -.025em 0 #444, 
				-.025em .025em 0 #444, 
				.025em .025em 0 #444;
				color: #fff;
				/* For non-webkit-browsers */
			}
			.demo2 {
				font: 8em/1 Bangers, sans-serif;
				text-align: center;
				-webkit-text-stroke: 1px black; 
				color: #fff;
			}
		</style>
	</head>

	<body>
		<h1 class="demo1">text-shadow设置阴影</h1>
		<h1 class="demo2">text-stroke设置阴影</h1>
	</body>

</html>

效果图:

1.png

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是css怎么实现字体描边效果?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏