Online notes favinavi - online bookmark

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

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个参数分别表示：水平偏移、垂直偏移、模糊（扩散）、描边的颜色。

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

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

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

3412

favinavi - for heavy web user Online notes

网站的页面访问量以及搜索引擎爬虫访问量的统计方法
统计页面访问量的方法有无数种，这里介绍我的“低级”方法： 1、当然是先用数据库建立一张访问统计表，每个需要统计的页面单独需要建一个字段，比如首页就用“index...
对比一下几个中文网络收藏夹的实用性之手机适配篇
手机满天下的时代，一个网站还好不好用，能否在手机上得到良好浏览体验非常关键了。最近几天自己重点关注了一下自己的favinavi网站页面的屏幕自适应效果，优化...
简洁有效地实现水平垂直双居中
同时实现水平和垂直方向双居中的方法网上有很多种，本人倾向于采用其中最简洁有效的方法来实现，具有比较好的通用性。具体实现的css代码如下：
A PHP method for determining whether a browser supports AVIF images
The latest generation of image compression format AVIF is very good, the effect ...
HTML5时代，使用同一个背景图片的多个链接自动适配不同屏幕宽度的一种方法
在很久很久以前，没有智能手机的时代，写网站只要考虑PC显示屏幕，基本上任何页面元素都只要固定的宽度和高度，比较好处理。为了提高页面的加载速度，讲究点的方法是...
自用小工具：正则表达式测试是否能匹配字符串
正则表达式写起来不难，但是要做到准确无误却是一个不小的挑战，经常因为一个小疏忽，导致貌似正常而实际上却有bug。尤其是域名或url相关的，特别容易出错，出错...