随着所有新的CSS3边框的出现(-webkit,…),现在可以在你的字体中添加边框了吗?(比如Twitter蓝色logo周围的白色边框)。如果没有,是否有一些不太丑陋的黑客可以在CSS/XHTML中完成这个任务,或者我仍然需要启动Photoshop?
当前回答
我将这里提到的所有解决方案进行了比较,以便快速概述:
<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>
https://codepen.io/Grienauer/pen/GRRdRJr
其他回答
text-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;
我曾经尝试用css3做那些圆角和阴影。后来,我发现它的支持仍然很差(当然是Internet Explorer !)
我最终尝试在JS (HTML canvas与IE canvas)中做到这一点,但它对性能影响很大(甚至在我的C2D机器上)。简而言之,如果你真的需要这种效果,考虑JS库(它们中的大多数应该能够在IE6上运行),但不要因为性能问题而过度使用;如果你还需要其他选择……你可以使用SFiR,然后PS它和SFiR它。CSS3今天还没有准备好。
为了详细说明已经提到的-webkit-text-stroke的一些答案,下面是使其工作的代码:
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.00px;
}
这里有一篇关于使用文本笔画的深入文章,这里有一个支持文本笔画的浏览器列表。
这是我正在使用的:
.text_with_1px_border
{
text-shadow:
-1px -1px 0px #000,
0px -1px 0px #000,
1px -1px 0px #000,
-1px 0px 0px #000,
1px 0px 0px #000,
-1px 1px 0px #000,
0px 1px 0px #000,
1px 1px 0px #000;
}
.text_with_2px_border
{
text-shadow:
/* first layer at 1px */
-1px -1px 0px #000,
0px -1px 0px #000,
1px -1px 0px #000,
-1px 0px 0px #000,
1px 0px 0px #000,
-1px 1px 0px #000,
0px 1px 0px #000,
1px 1px 0px #000,
/* second layer at 2px */
-2px -2px 0px #000,
-1px -2px 0px #000,
0px -2px 0px #000,
1px -2px 0px #000,
2px -2px 0px #000,
2px -1px 0px #000,
2px 0px 0px #000,
2px 1px 0px #000,
2px 2px 0px #000,
1px 2px 0px #000,
0px 2px 0px #000,
-1px 2px 0px #000,
-2px 2px 0px #000,
-2px 1px 0px #000,
-2px 0px 0px #000,
-2px -1px 0px #000;
}
有一个实验性的CSS属性叫做text-stroke,在一些浏览器中被支持在-webkit前缀后面。
h1 { -webkit-text-stroke: 2px黑色;/*宽度和颜色*/ 字体类型:无;颜色:黄色; } <标题> Hello World h1 > < /
另一个可能的技巧是使用四个阴影,在所有方向上每个像素,使用属性text-shadow:
h1 { /* 1像素黑色阴影左,上,右,下*/ 文本阴影:-1px 0黑,0 1px黑,1px 0黑,0 -1px黑; 字体类型:无;颜色:黄色; } <标题> Hello World h1 > < /
但如果厚度超过1个像素,它就会变得模糊。
推荐文章
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 设备像素比到底是什么?
- 我如何做一个半透明的背景?
- 在CSS网格布局中等高行
- $(window).width()与媒体查询不一样
- 如何以及在哪里使用::ng-deep?
- 如何设置身体高度溢出滚动
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 将RGB转换为白色的RGBA