快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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://6mz.cn/article/doshsp.html

其他资讯