纯CSS描边字
<style>#mama {
width: 100%;
font: normal 1em / 1.5em sans-serif;
}
#mama p, #mama div { margin: 10px 0; }
.strokeText {
text-align: center;
font: bold 4em sans-serif;
text-stroke: 2px red;
-webkit-text-stroke: 2px red;
color: green;
}
</style>
<div id="mama">
<p>效果：</p>
<div class="strokeText">花潮论坛欢迎你</div>
<p>代码：</p>
<pre><span style="color: red;">.strokeText </span>{
<span style="color: blue;">text-align</span>: center;
<span style="color: blue;">font</span>: bold 4em sans-serif;
<span style="color: blue;">text-stroke</span>: 2px red;
<span style="color: blue;">-webkit-text-stroke</span>: 2px red;
<span style="color: blue;">color</span>: green;
}
</pre>
<p>分析：</p>
<p>实现描边字的关键在于 text-stroke 属性。该属性尚处于实验阶段，所以需要前缀 -webkit- 方能生效，目前，火狐浏览器、基于chromium内核的所有浏览器均支持该属性。</p><p>此法，适用于 font-size 设置为较大的文本，字号过小描边效果不佳。</p>
</div> 这个好，代码这么简单，效果却不错{:4_173:} 红影 发表于 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
这个要靠想象力
然后，将所学知识综合运用起来，做出更美的效果
一下子想不出来怎样综合啊{:4_173:} 马黑黑 发表于 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
慢慢会的
反正现在没想到{:4_173:} 红影 发表于 2022-9-22 12:39
反正现在没想到
我那个贝加尔湖畔就是对这个东东进行了一些扩展，可以研究下。可扩展的思路还很多。 马黑黑 发表于 2022-9-22 12:32
颜色也是一个需要考虑的问题
嗯，颜色有时会带来错觉。 马黑黑 发表于 2022-9-22 12:53
我那个贝加尔湖畔就是对这个东东进行了一些扩展，可以研究下。可扩展的思路还很多。
嗯嗯，用描边做的歌词也很好看{:4_187:} 醉美水芙蓉 发表于 2022-9-22 20:36
这个做歌词同步也挺漂亮的！
还行的
页:
[1]