纯CSS描边字

马黑黑

效果：

花潮论坛欢迎你

代码：

.strokeText {
   text-align: center;
   font: bold 4em sans-serif;
   text-stroke: 2px red;
   -webkit-text-stroke: 2px red;
   color: green;
}

分析：

实现描边字的关键在于 text-stroke 属性。该属性尚处于实验阶段，所以需要前缀 -webkit- 方能生效，目前，火狐浏览器、基于chromium内核的所有浏览器均支持该属性。

此法，适用于 font-size 设置为较大的文本，字号过小描边效果不佳。

红影

这个好，代码这么简单，效果却不错

马黑黑

红影 发表于 2022-9-21 20:35
这个好，代码这么简单，效果却不错

还可以做一些复杂加工

红影

马黑黑 发表于 2022-9-21 21:06
还可以做一些复杂加工

还能再复杂？怎样复杂啊？

马黑黑

红影 发表于 2022-9-21 21:36
还能再复杂？怎样复杂啊？

这个要靠想象力
然后，将所学知识综合运用起来，做出更美的效果

红影

哦，我知道，是可以多层套上去，弄更多的描边颜色？

马黑黑

红影 发表于 2022-9-21 21:37
哦，我知道，是可以多层套上去，弄更多的描边颜色？

思路可以是你说的这样。比如吧，用伪元素，让字体更壮硕一些，因为，描边后，字号似乎瘦了一圈的

红影

马黑黑 发表于 2022-9-21 21:37
这个要靠想象力
然后，将所学知识综合运用起来，做出更美的效果

一下子想不出来怎样综合啊

红影

马黑黑 发表于 2022-9-21 21:38
思路可以是你说的这样。比如吧，用伪元素，让字体更壮硕一些，因为，描边后，字号似乎瘦了一圈的

你说的字体瘦了是不是颜色导致的错觉？如果配色上考虑一下，会不会就好点？

山人

不是。描边占用笔画空间，比如设置2像素的描边，有1像素往笔画内部挤占，字的笔画就变瘦了

马黑黑

红影 发表于 2022-9-22 10:09
一下子想不出来怎样综合啊

慢慢会的

马黑黑

红影 发表于 2022-9-22 10:10
你说的字体瘦了是不是颜色导致的错觉？如果配色上考虑一下，会不会就好点？

颜色也是一个需要考虑的问题

红影

山人 发表于 2022-9-22 11:17
不是。描边占用笔画空间，比如设置2像素的描边，有1像素往笔画内部挤占，字的笔画就变瘦了

哦哦，那描边宽度取得大的话，侵占就更多了吧。

红影

马黑黑 发表于 2022-9-22 12:10
慢慢会的

反正现在没想到

马黑黑

红影 发表于 2022-9-22 12:39
反正现在没想到

我那个贝加尔湖畔就是对这个东东进行了一些扩展，可以研究下。可扩展的思路还很多。

红影

马黑黑 发表于 2022-9-22 12:32
颜色也是一个需要考虑的问题

嗯，颜色有时会带来错觉。

红影

马黑黑 发表于 2022-9-22 12:53
我那个贝加尔湖畔就是对这个东东进行了一些扩展，可以研究下。可扩展的思路还很多。

嗯嗯，用描边做的歌词也很好看

马黑黑

醉美水芙蓉 发表于 2022-9-22 20:36
这个做歌词同步也挺漂亮的！

还行的