css如何设置文字描边效果?

想要使用CSS给文字添加描边效果,主要有两种方法:使用text-stroke属性或text-shadow属性。

方法1:使用text-shadow属性

text-shadow属性用于向文本添加字体边框或阴影。

text-shadow是实现Web描述效果中最为常见的一种方案,简单的原理就是在文本的上、下、左、右添加文本阴影(不带模糊的阴影)。

语法:

text-shadow: h-shadow v-shadow blur-radius color|none;

属性值:

  • h-shadow:它在字体周围设置水平阴影。

  • v-shadow:它设置字体周围的垂直阴影。

  • blur-radius:设置字体周围的模糊半径。

  • color:它设置字体周围的颜色。

  • none:它没有在字体周围设置任何内容。

示例:

<!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;
			}
			
			h1 {
				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 */
			}
		</style>
	</head>

	<body>
		<h1>Hello World</h1>
	</body>

</html>

效果图:

1.jpg

方法2:使用text-stroke属性

值得庆幸的是,现在可以直接使用text-stroke属性实现描述效果。

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

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

语法:

text-stroke: <width> <color>;

示例:

<!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;
			}
			
			h1 {
				font: 8em/1 Bangers, sans-serif;
				text-align: center;
				-webkit-text-stroke: 1px black; 
				color: #fff;
			}
		</style>
	</head>

	<body>
		<h1>Hello World</h1>
	</body>

</html>

效果图:

2.jpg

有了text-stroke属性,咱们可以非常轻易的实现文本描边效果,也告别了使用text-shadow属性来模拟文本描边效果。

Image placeholder
前端答疑
未设置
  46人点赞

没有讨论,发表一下自己的看法吧

推荐文章
CSS怎么给文字添加描边?

CSS怎么给文字添加描边?给需要实现文字描边的元素添加如下CSS3的属性text-shadow:#0001px00,#00001px0,#000-1px00,#0000-1px0; -webkit-t

css如何设置字体位置

css如何设置字体位置1、text-align设置字体的位置text-align语法:text-align:left|right|center|justifytext-align参数值与说明:left

css如何设置图片不变形

css如何设置图片不变形解决方法有两种:一、让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。//原尺寸300*200 //等比缩放2:1 img{ wid

css如何设置表格边框不重叠?

css如何设置表格边框不重叠?一、设置css属性border-collapse:collapse。table{ border-collapse:collapse; } tabletr{ border:

css如何设置元素不显示仅占位置?

css如何设置元素不显示仅占位置?隐藏页面元素可以使用visibility:hidden属性,它将元素设置为不可见,并且占据原来的位置,不能响应点击事件。不可见 .hide{ visibility:

css如何实现文字颜色渐变?3种实现方法

基础样式:.gradient-text{ text-align:left; text-indent:30px; line-height:50px; font-size:40px; font-

dw怎么显示css效果?

dw怎么显示css效果?dw中显示css效果,可以开启实时视图模式。我们现在来看看,Dreamweaver如何显示实时视图。1、打开软件后我们点击菜单栏上方的【查看】按钮。2、接下来我们就可以点击【实

jquery怎么实现淡入淡出效果?

jquery怎么实现淡入淡出效果?jquery实现淡入效果使用fadeIn()、淡出效果使用fadeOut(),来回切换使用fadeToggle()。●jQueryfadeIn()方法:用于淡入已隐藏

css文字水平垂直居中怎么设置?

1、文字水平居中在CSS中想要让文字水平居中,可以使用text-align:center;。text-align是一个基本的属性,它会影响一个元素中的文本行互相间的对齐方式。值left、right和c

js如何修改css属性?

js如何修改css属性?1、修改style样式:通过document.styleSheets[n]//n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到

css如何清除a标签的block属性

css如何清除a标签的block属性a标签默认是inline行内元素,不支持设置宽高等属性。为了让a标签支持宽高属性,我们可以设置a{display:block}将它变成块级元素同样的,清除a标签的b

css如何让元素不随滚动条滚动?

在CSS中,可以使用固定定位(position:fixed;)来固定元素的位置,让元素不随滚动条滚动。fixed生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对

css如何让字体不加粗?

在CSS中可以使用font-weight:normal样式来让字体不加粗。font-weight属性设置文本的粗细,设置值为normal来定义标准的字符。font-weight属性用于设置显示元素的文

css如何去掉html元素

css如何去掉html元素css无法将html元素完全的从页面中去除,但是可以通过一些方法让它们在视觉上隐藏掉。具体的做法是设置元素css属性display:none和visibility:hidde

js如何引入css文件?

js如何引入css文件?1、使用document.write方式输出引入css的link标签在调用文件的顶部加入下例代码 document.write(''); (注:有时你引用的文件还可能需要引用其

css如何将一行平均分成几列?

css如何将一行平均分成几列?column-count属性规定元素应该被划分的列数。它的取值可以是number|autonumber:元素内容将被划分的最佳列数。auto:由其他属性决定列数,比如"c

css如何把div修饰成圆?

css如何把div修饰成圆?1、打开代码编辑器,新建一个html文件,写上基本的结构 Document 2、在body标签内输入:,这里的div就是用于画圆形的标签。(推荐学习:CSS视

CSS如何让背景图片不重复?

CSS如何让背景图片不重复?css中设置完背景图后,不指定平铺属性,默认是横向纵向重复的,导致图片出现重复。让图片不重复可以设置background-repeat属性。css中background-r

css图片属性如何设置?

css图片属性如何设置?首先新建一个style标签;然后在style标签内使用语法img{属性:值}即可,比如设置图片边框属性img{border:1pxsolidred}。语法:img{ 属性:值;

dw中如何设置表格css样式

1、新建一个空白文档,点击插入table,插入一个适合的表格。2、在表格内输入任意文字,右键css样式,新建,选择标签类型。(推荐学习:CSS视频教程)3、选择table,点击确定,根据需求定义tab

css图片后的文字无法居中对齐怎么解决?

比如说,现在我要做一个简单的删除按钮,只由一个icon和“删除”两个字组成,你会如何布局,给你30秒时间考虑。好,先亮出HTML代码如下:删除很简单,就是一个class为del的div元素下有两个sp

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

中国SaaS如何出海掘金?

随着国内人口红利逐渐消失殆尽,出海掘金成为国内软件厂商的一个新选择。尤其移动互联网时代国内的互联网公司走在了世界的前面,除了阿里、腾讯、京东等巨头外,很多SaaS公司也选择出海寻求新的机会。比如做劳动

jquery如何设置元素不可点击?

jquery如何设置元素不可点击?jquery设置表单元素不可点击可以使用attr()方法,给它们加上readonly、disabled属性。设置其他元素不可点击,可以使用css()方法,设置它们的p

如何在 Laravel 6 中缓存数据库查询结果?

在加快应用程序速度方面,缓存可能是最有效的。Laravel预先安装了缓存驱动程序。因此你可以直接使用Redis,Memcached或者使用本地文件进行缓存操作。Laravel附带了此功能。这一次,我们