在线笔记 favinavi - 人性化网络收藏夹

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

分类标签：全部 CSS html javascript php/other IT

by: fanshome 2023-05-29 14:57(UTC)

基本方法：

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

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

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

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

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

CSS复制代码

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;
}

html复制代码

<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>

1621

favinavi - 重度网络用户必备在线笔记

无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS?
累计布局偏移: Cumulative Layout Shift, 简称CLS，是一项web性能的重要指标，旨在避免页面渲染时，某些元素（比如图片、字体等）加载前...
favinavi网络收藏夹Ver 2.0开发笔记之更精细适配各类屏幕
这两天把favinavi计划中的基本功能都做完了，虽然还不很完美，但是追求完美总是要有一个前提和基础，就是先搭好框架。目前来看，favinavi的基本框架就...
明明做好了301跳转，为什么某些搜索引擎就是不来收录新站？
favinavi自己就遇到了这个问题，老域名www.favii.cn虽然已有十几年历史，积累了一些忠实粉丝，但是为了能更好的拓展发展空间，还是痛下决心启用了fa...
php/javascript的一些关于时间处理的函数
记录一些经常用到的时间处理函数以备用。
使用certbot申请泛域名证书以及手动续期
泛域名的证书申请或手动续期需要在dns解析服务器设置相应的txt记录。申请或续期使用同样的certbot命令，如下，记录以备用。
一个使用CSS/HTML将图像自适应屏幕的示例
在这个示例中，我们将图像的最大宽度设置为100%，并将高度设置为自动。此外，我们还添加了一个样式，以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能...