白框、红色文本的 CSS3 技术

发布于 2024-12-29 07:30:28 字数 213 浏览 0 评论 0原文

我与以下页面没有任何形式的关联:

http://www.wpsyndicator.com/

但是正如您在该页面上看到的,他们使用图像来显示白色轮廓、阴影、红色文本。 CSS3中有没有办法实现这个功能?我的意思是,我可以处理阴影和红色,但白色字体轮廓不是我熟悉的。

I'm not associated in any form with the following page:

http://www.wpsyndicator.com/

However, as you can see on that page, they used images to show the white-outlined, shadowed, red text. Is there a way in CSS3 to implement this feature? I mean, I can handle the shadow and the red, but the white font outlining is not something I'm familiar with.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

述情 2025-01-05 07:30:28

您正在寻找文本笔划。

-webkit-text-lines: 1px 白色;

目前仅 Web-kit 支持,您可以在此处查看兼容性列表 http://caniuse.com/文本笔划

更多信息:

http://css-tricks. com/adding-lines-to-web-text/

http://www.webkit.org/blog/85/introducing-text-笔画/

这是大卫的一个例子:http://jsfiddle.net/davidThomas/h5J6K/2/

You are looking for text-stroke.

-webkit-text-stroke: 1px white;

It is only supported by the web-kit for now, you can see the compatibility list here http://caniuse.com/text-stroke

More Info:

http://css-tricks.com/adding-stroke-to-web-text/

http://www.webkit.org/blog/85/introducing-text-stroke/

Here is an example from David: http://jsfiddle.net/davidThomas/h5J6K/2/

咿呀咿呀哟 2025-01-05 07:30:28

您可以使用 css3 text-shadow 属性来实现此效果。但在 IE 中不起作用,因此必须找到一个来模拟该浏览器中的效果。代码看起来像这样......
#myDiv {
文本阴影:1px 1px 1px #fff,2px 2px 1px #fff,-1px -1px 1px #fff,-2px -2px 1px #fff;
第一个参数

是距文本的水平距离,第二个参数是垂直距离,第三个参数是模糊度。这个数字越低,模糊就越少。你做负片向上或向左。这很酷,你可以用它做一些非常漂亮的效果。希望有帮助

You can use the css3 text-shadow property to achieve this effect. Will not work in IE tho so will have to find some one to emulate the effect in that browser. The code looks like this...
#myDiv {
text-shadow: 1px 1px 1px #fff, 2px 2px 1px #fff, -1px -1px 1px #fff, -2px -2px 1px #fff;
}

The first argument is the horizontal distance from the text, the second, the vertical, the third is the blur. the lower this number the less blur. you do negatives to go up or to the left. This is cool and you can do some really neat effects with this. Hope that helps

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文