随着所有新的CSS3边框的出现(-webkit，…)，现在可以在你的字体中添加边框了吗?(比如Twitter蓝色logo周围的白色边框)。如果没有，是否有一些不太丑陋的黑客可以在CSS/XHTML中完成这个任务，或者我仍然需要启动Photoshop?
当前回答
text-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;
其他回答
你可以使用css text-shadow(或-webkit-text-shadow/-moz-text-shadow)和一个非常低的模糊来模拟一个文本描边:
#element
{
text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
-moz-text-shadow: 0 0 2px #000;
-webkit-text-shadow: 0 0 2px #000;
}
但是，虽然这个属性比-webkit-text-stroke属性更广泛地可用，但我怀疑它是否对大多数用户可用，但这可能不是问题(优雅降级，等等)。
有一个实验性的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个像素，它就会变得模糊。
由于webkit似乎对我来说是bug，我对答案并不满意。然后我发现这个代码依赖，可以为您生成原始CSS。只需在JS中输入颜色和边框宽度，然后向下滚动到CSS输出。
2px黑色文本轮廓的例子:
text-shadow: -2px -2px 0 black,-2px -1px 0 black,-2px 0px 0 black,-2px 1px 0 black,-2px 2px 0 black,-1px -2px 0 black,-1px -1px 0 black,-1px 0px 0 black,-1px 1px 0 black,-1px 2px 0 black,0px -2px 0 black,0px -1px 0 black,0px 0px 0 black,0px 1px 0 black,0px 2px 0 black,1px -2px 0 black,1px -1px 0 black,1px 0px 0 black,1px 1px 0 black,1px 2px 0 black,2px -2px 0 black,2px -1px 0 black,2px 0px 0 black,2px 1px 0 black,2px 2px 0 black
以防代码依赖被删除(Vue.js):
new Vue({
el: '#app',
data: {
width: 5,
color: 'DeepPink',
styles: ''
},
created() {
this.textChange()
},
methods: {
textChange() {
var shadows = []
var color = this.color
for(let i = -this.width; i <= this.width; i++) {
for(let j = -this.width; j <= this.width; j++) {
shadows.push(`${i*1}px ${j*1}px 0 ${color}`)
}
}
this.styles = shadows.join(',')
}
}
})
html:
<p><strong>text-shadow:</strong> {{styles}}</p>
我将这里提到的所有解决方案进行了比较，以便快速概述:
<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;
