宜宾网站建设公司

css设置字体白色描边的方法-创新互联

小编给大家分享一下css设置字体白色描边的方法，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

创新互联公司专注于企业营销型网站建设、网站重做改版、定安网站定制设计、自适应品牌网站建设、H5页面制作、电子商务商城网站建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为定安等各大城市提供网站开发制作服务。

css设置字体白色描边的方法：1、使用text-stroke属性，语法格式“text-stroke: 3px #fff;”；2、使用text-shadow属性给字体四周添加白色阴影。

css设置字体白色描边

1、使用text-stroke属性

text-stroke属性用于向文本添加描边。此属性可用于更改文字的描边宽度和颜色。使用-webkit-前缀支持此属性。

text-stroke是text-stroke-width和text-stroke-color（给文本填充颜色）两个属性的简写。

语法：

text-stroke:  ;

参数：


  • width：设置文字的描边厚度

  • color：设置文字的描边颜色

css设置字体白色描边的方法

示例：




	
		
		
			@import url(https://fonts.googleapis.com/css?family=Bangers);
			body {
				font-size: 50%;
				line-height: 1;
				background: palevioletred;
			}
			
			h2 {
				font: 8em/1 Bangers, sans-serif;
				-webkit-text-stroke: 3px #fff; 
				color:black;
			}
		
	

	
		
Hello World

效果图：


css设置字体白色描边的方法

2、使用text-shadow属性

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

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

  • color:指定颜色。

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

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

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

示例：




	
		
		text-shadow-文字描边
		
	

	
		
			
没有添加描边

			添加了字体描边

效果图：


css设置字体白色描边的方法

看完了这篇文章，相信你对“css设置字体白色描边的方法”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


分享标题：css设置字体白色描边的方法-创新互联
网址分享：http://hbruida.cn/article/doshsp.html

其他资讯