default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

几种CSS字体描边和阴影效果

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-05-29 14:57(UTC)

Demo

基本方法:

1、-weblit-text-strok:字体描边,非标准方法,浏览器兼容性存在一些问题。好处是这种方法不扩展字体本身,属于在字体内部描出边界,所以字体完全不走样。

2、text-shadow:字体阴影,符合标准规范,现代浏览器普遍支持。重点:可以用重复多次不同偏移量阴影来实现描边效果。但是假如用这种方法来做纯包围式描边(不模糊blur)的话,效果不完美,如果描边宽度比较大的话,斜边的尖角部分会出现“锯齿、缺角”等。

语法:{text-shadow: h-shadow v-shadow blur color;}

4个参数分别表示:水平偏移、垂直偏移、模糊(扩散)、描边的颜色。

我们可以根据实际需要选择,效果如下图:

几种CSS字体描边和阴影效果

CSScontent_copyCopy codes
p{
	font-size: 64px;
	font-weight: 600;
	text-align: center;
	letter-spacing: 8px;
	height: 64px;
	color: #098;
	margin:24px;
}
@media (max-width:599.9px){p{font-size:28px;}}

.s1{
	-webkit-text-stroke: 2px #000;
}

.s2{
	text-shadow: 2px 2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, -2px -2px 0 #000,
	0 2px 0 #000, 0 -2px 0 #000, 2px 0 #000, -2px 0 #000;
}

.s3{
	text-shadow: 3px 3px 0 #000;
}

.s4{
	text-shadow: 0 0 4px #000;
}

.s5{
	text-shadow: 3px 3px 6px #000;
}
htmlcontent_copyCopy codes
<p class='s1'>text-stroke描边</p>
<p class='s2'>全包围阴影缺角的“X”</p>
<p class='s3'>无模糊阴影效果</p>
<p class='s4'>带blur阴影效果</p>
<p class='s5'>45°投影效果</p>

visibility 3499


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel