请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2023-2-6 12:40 编辑
描边字不是svg或canvas的专利，尤其在CSS3出来以后。纯CSS+HTML实现描边字，方法还是有几个的，这里给大家展现一下。
方法一：使用 -webkit-text-stroke 属性
这个我们以前单独介绍过，它从svg借用而来，需要前缀 -webkit- ，是一个简写属性，语法很简单，描边尺寸+颜色值，试看例子：
<style>
.stroke {
font: bold 4em sans-serif;
-webkit-text-stroke: 1px red;
color: snow;
}
</style>
<pre class="stroke">
ABCDEF
abcdef
花潮论坛
花潮論壇
</pre>
ABCDEF
abcdef
花潮论坛
花潮論壇
方法二：简单利用 text-shadow 属性
text-shadow 属性需要四个参数，水平阴影位置+垂直阴影位置+模糊尺寸+颜色，我们将阴影位置全部设置为 0，模糊尺寸设置为合适的值，文本颜色随意，阴影颜色要设置亮眼的颜色。看下面例子：
<style>
.txtshadow1 {
font: bold 4em sans-serif;
text-shadow: 0px 0px 1px red;
color: snow;
}
</style>
<pre class="txtshadow1">
ABCDEF
abcdef
花潮论坛
花潮論壇
</pre>
ABCDEF
abcdef
花潮论坛
花潮論壇
效果是有，但确实差强人意，原因是我们仅仅利用了模糊尺寸来描边，即便使用了很亮的颜色，依然显得不够清晰。
方法三：多重使用 text-shadow 属性
设想就是设置几重阴影，让这些阴影以闭合方式将文字包裹起来，看看例子：
<style>
.txtshadow2 {
font: bold 4em sans-serif;
text-shadow: 1px 0px 1px red, 0px 1px 1px red, -1px 0px 1px red, 0px -1px 1px red;
color: snow;
}
</style>
<pre class="txtshadow2">
ABCDEF
abcdef
花潮论坛
花潮論壇
</pre>
ABCDEF
abcdef
花潮论坛
花潮論壇
以上三种方法，后两种兼容性好，第一种属试验阶段。孰优孰劣，难以定论，根据情况选择使用就行。
基于CSS+HTML的描边字效果，可能还有其他奇技淫巧的法子，不过估计会很繁琐，这里就不探讨了，有兴趣的朋友可以自行研究。
| 
发表于 2023-2-6 12:35
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-6 15:50
楼主
发表于 2023-2-7 12:02
