网站建设资讯

NEWS

网站建设资讯

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

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

宜城ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!

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://cdweb.net/article/pjpjcc.html

其他资讯