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

3395

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

简洁有效地实现水平垂直双居中
同时实现水平和垂直方向双居中的方法网上有很多种，本人倾向于采用其中最简洁有效的方法来实现，具有比较好的通用性。具体实现的css代码如下：
mysql8开启主从同步注意事项，否则会动不动就出错停止
默认情况下，mysql只允许本地登录，如果要开启主从同步，主机必须开启远程连接，则需要修改mysqld配置文件，以ubuntu 22.04+mysql8.0为例...
网络收藏夹网站开发过程中PHP正则表达式忘记使用非贪婪模式带来的一次教训
新版favinavi人性化网络收藏夹网站建设初期，还没有开始宣传，就发现访问量开始8小时内达到了大几千，有点喜出望外。可是再看看又发现不对，统计的关键页面的访问...
网络收藏夹的正确打开方式是怎样的？
有人会说：这算哪门子问题，网络收藏夹不就是一个普通网站吗？普通网站怎么打开，你网络收藏夹就怎么打开呗！嗯...这么说当然没错，但是，但是！网络收藏夹毕竟是一...
你的网站会有不请自来的访客吗？
做网站，做SEO，就是希望别人来访问，最欢迎的当然是真实用户，其次是各大搜索引擎的蜘蛛。但是，假如你是个站长，你真的了解都有谁来造访你的网站吗？有不请自来的吗？...
Ubuntu 22.04 live server更换亚马逊AWS的更新源
amzon亚马逊云AWS的更新源，即使在国内速度也基本可接受，其最大特点是软件丰富，常用软件包几乎没有找不到的。具体步骤如下：