在线笔记 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>

3397

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

一个纯CSS的最小干扰的渐变色彩虹loading bar
Loading图标，又称“加载中”图标，以往是用gif格式动图来实现。但是gif有一个比较明显的问题，不易调整大小，然后图片一般比较粗糙，颗粒感严重。现在流...
搭建家庭用服务器全套攻略，300元一台小主机全部搞定
有些人闲不住，喜欢折腾，业余时间想自己搭个网站，或者更简单点，想自己折腾个软路由、NAS什么的，那么，这篇文章可能对你有所帮助。一、硬件选型：一般而言，...
使用favinavi网络收藏夹分享功能提高工作效率一例
favinavi人性化网络收藏夹提供了分享功能，就是用户可以将自己收藏、整理后的书签分享给自己的同学、同事或朋友等。在某地政府部门工作的一位领导（这里为了方...
统计搜索引擎对网站地图文件或robots.txt的访问记录的一种方法
一般而言，各大搜索引擎都允许提交网站地图，例如网站根目录下的“sitemap.xml”文件，是xml格式的文本文件。当提交了网站地图后，搜索引擎蜘蛛来访时，可能...
CSS3 一款漂亮的带渐变背景和关闭按钮的卡片头样式
使用css: linear-gradient来实现线性颜色渐变背景，效果见下图： [img] 点击“演示”按钮可以查看效果。
网页图片CSS进阶篇——优化图片，提升网页加载速度
说到提升网页中图片加载速度，一般立即想到的是给图片瘦身，比如减小图片尺寸，或者通过工具降低图片文件大小，比如png图片，可以利用在线压缩PNG图片网页工具，一般...