css+html文本描边的几种实现方法
本帖最后由 马黑黑 于 2023-2-6 12:40 编辑 <br /><br /><style>.chj_code {
position: relative;
margin: 10px 0 10px 60px;
border-left: 2px solid tan;
font: normal 16px/20px Consolas, Monaco, monospace;
}
.chj_code > p {
margin: 3px 0 3px 10px;
position: relative;
white-space: pre-wrap;
tab-size: 4;
}
.chj_code > p::before {
position: absolute;
width: 40px;
left: -55px;
content: attr(data-line);
text-align: right;
color: #ccc;
}
.txtshadow1 {
font: bold 4em sans-serif;
text-shadow: 0px 0px 2px red;
color: snow;
}
.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;
}
.stroke {
font: bold 4em sans-serif;
-webkit-text-stroke: 1px red;
color: snow;
}
</style>
<p>描边字不是svg或canvas的专利，尤其在CSS3出来以后。纯CSS+HTML实现描边字，方法还是有几个的，这里给大家展现一下。</p>
<p><br></p>
<p>方法一：使用 -webkit-text-stroke 属性</p>
<p><br></p>
<p>这个我们以前单独介绍过，它从svg借用而来，需要前缀 -webkit- ，是一个简写属性，语法很简单，描边尺寸+颜色值，试看例子：</p>
<p><br></p>
<div class="chj_code">
<p><style></p>
<p><span style="color: red;">.stroke </span>{</p>
<p> <span style="color: blue;">font</span>: bold 4em sans-serif;</p>
<p> <span style="color: blue;">-webkit-text-stroke</span>: 1px red;</p>
<p> <span style="color: blue;">color</span>: snow;</p>
<p>}</p>
<p></style></p>
<p><br></p>
<p><<span style="color:darkred">pre</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"stroke"</span>></p>
<p> ABCDEF</p>
<p> abcdef</p>
<p> 花潮论坛</p>
<p> 花潮論壇</p>
<p><<span style="color: darkred">/pre</span>></p>
</div>
<pre class="stroke"> ABCDEF
abcdef
花潮论坛
花潮論壇
</pre>
<p><br></p>
<p>方法二：简单利用 text-shadow 属性</p>
<p><br></p>
<p>text-shadow 属性需要四个参数，水平阴影位置+垂直阴影位置+模糊尺寸+颜色，我们将阴影位置全部设置为 0，模糊尺寸设置为合适的值，文本颜色随意，阴影颜色要设置亮眼的颜色。看下面例子：</p>
<p><br></p>
<div class="chj_code">
<p><style></p>
<p><span style="color: red;">.txtshadow1 </span>{</p>
<p> <span style="color: blue;">font</span>: bold 4em sans-serif;</p>
<p> <span style="color: blue;">text-shadow</span>: 0px 0px 1px red;</p>
<p> <span style="color: blue;">color</span>: snow;</p>
<p>}</p>
<p></style></p>
<p><br></p>
<p><<span style="color:darkred">pre</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"txtshadow1"</span>></p>
<p> ABCDEF</p>
<p> abcdef</p>
<p> 花潮论坛</p>
<p> 花潮論壇</p>
<p><<span style="color: darkred">/pre</span>></p>
</div>
<pre class="txtshadow1"> ABCDEF
abcdef
花潮论坛
花潮論壇
</pre>
<p><br></p>
<p>效果是有，但确实差强人意，原因是我们仅仅利用了模糊尺寸来描边，即便使用了很亮的颜色，依然显得不够清晰。</p>
<p><br></p>
<p>方法三：多重使用 text-shadow 属性</p>
<p><br></p>
<p>设想就是设置几重阴影，让这些阴影以闭合方式将文字包裹起来，看看例子：</p>
<p><br></p>
<div class="chj_code">
<p><style></p>
<p><span style="color: red;">.txtshadow2 </span>{</p>
<p> <span style="color: blue;">font</span>: bold 4em sans-serif;</p>
<p> <span style="color: blue;">text-shadow</span>: 1px 0px 1px red, 0px 1px 1px red, -1px 0px 1px red, 0px -1px 1px red;</p>
<p> <span style="color: blue;">color</span>: snow;</p>
<p>}</p>
<p></style></p>
<p><br></p>
<p><<span style="color:darkred">pre</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"txtshadow2"</span>></p>
<p> ABCDEF</p>
<p> abcdef</p>
<p> 花潮论坛</p>
<p> 花潮論壇</p>
<p><<span style="color: darkred">/pre</span>></p>
</div>
<pre class="txtshadow2"> ABCDEF
abcdef
花潮论坛
花潮論壇
</pre>
<p><br></p>
<p>以上三种方法，后两种兼容性好，第一种属试验阶段。孰优孰劣，难以定论，根据情况选择使用就行。</p>
<p><br></p>
<p>基于CSS+HTML的描边字效果，可能还有其他奇技淫巧的法子，不过估计会很繁琐，这里就不探讨了，有兴趣的朋友可以自行研究。</p>
<script>
(function setLineNum() {
let code_papas = document.querySelectorAll('.chj_code');
Array.from(code_papas).forEach( (item,key) => {
let pps = item.children;
Array.from(pps).forEach( (p,pkey) => {
p.setAttribute('data-line', pkey + 1);
});
});
})();
</script> 第一种就是空心字吧，给出外轮廓。黑黑介绍过的。后面两种都是用阴影的模糊值来描边。第三种最神奇，单独给出4个方向的阴影值和空心模糊值，得到的效果和第一种差不多呢{:4_187:} 用阴影描边，想描得清晰，要用第三种就行了。这样用实际效果来讲解最清晰了。真赞。跟着黑黑学习新知识{:4_187:} 文化大讲堂，我旁听。 庶民 发表于 2023-2-6 15:50
文化大讲堂，我旁听。
超感谢 红影 发表于 2023-2-6 14:38
用阴影描边，想描得清晰，要用第三种就行了。这样用实际效果来讲解最清晰了。真赞。跟着黑黑学习新知识{:4_ ...
简简单单，一看就明白 红影 发表于 2023-2-6 14:36
第一种就是空心字吧，给出外轮廓。黑黑介绍过的。后面两种都是用阴影的模糊值来描边。第三种最神奇，单独给 ...
这是你说的殊途同归 马黑黑 发表于 2023-2-6 17:44
简简单单，一看就明白
是的，有讲解有实例，对比着看最清楚了{:4_199:} 马黑黑 发表于 2023-2-6 17:45
这是你说的殊途同归
要想殊途同归，也需要有技术手段去实现呢{:4_199:} 红影 发表于 2023-2-6 22:21
要想殊途同归，也需要有技术手段去实现呢
努力一下下就行 红影 发表于 2023-2-6 22:20
是的，有讲解有实例，对比着看最清楚了
{:4_190:} 马黑黑 发表于 2023-2-6 23:50
努力一下下就行
看到文字描边，又想起你那个描边会动的帖子了，当然，那个是SVG的{:4_173:} 马黑黑 发表于 2023-2-6 23:50
从这个帖子里知道了，直接用文字阴影做描边，并不是很清晰。当然，有时要的就是这个，当需要清晰的时候，不能直接只使用阴影。 醉美水芙蓉 发表于 2023-2-7 12:02
老师做教程很辛苦！大力支持一下！感谢黑黑老师的分享！
{:4_190:} 红影 发表于 2023-2-7 10:46
从这个帖子里知道了，直接用文字阴影做描边，并不是很清晰。当然，有时要的就是这个，当需要清晰的时候， ...
多重阴影还是可以的 红影 发表于 2023-2-7 10:44
看到文字描边，又想起你那个描边会动的帖子了，当然，那个是SVG的
对，这里是纯CSS+HTML的 马黑黑 发表于 2023-2-7 12:08
多重阴影还是可以的
多重阴影的效果通过这个帖子也感受更深了，谢谢黑黑{:4_187:} 马黑黑 发表于 2023-2-7 12:09
对，这里是纯CSS+HTML的
嗯嗯，这个是讲解技术的{:4_204:} 红影 发表于 2023-2-7 20:18
多重阴影的效果通过这个帖子也感受更深了，谢谢黑黑
喝水{:4_191:}
页:
[1]
2