所有新的CSS3边界内容都在进行中(-webkit,.)现在可以为您的字体添加边框吗?(就像蓝色Twitter徽标周围的纯白边框).如果没有,有没有什么不太难看的技巧可以在CSS/XHTML中实现这一点,或者我还需要启动Photoshop吗?

推荐答案

有一个叫做text-strokesupported on some browsers behind a -webkit prefix的实验性CSS属性.

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}
<h1>Hello World</h1>

另一个可能的技巧是使用属性text-shadow,在所有方向上使用四个阴影,每个阴影一个像素:

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}
<h1>Hello World</h1>

但是当厚度超过1个像素时,它会变得模糊.

Css相关问答推荐

基于子元素的子元素数量的样式元素

CSS Grid我不想要的东西

关闭Superset中的Deck.gl工具提示

使用SVG以竖排书写模式创建渐变文本时,文本显示异常

为什么CSS flex似乎应用了两次内部元素的填充?

CSS关键帧中使用transform-origin存在问题的解决方案

Puppeteer - 无法在wine 店网站中拉出正确的 CSS Select 器

如何在相对位置和绝对位置之间转换元素?

semantic-ui-react 使输入使用全宽度可用

子菜单的背景不占用所有空间

如何将转换应用于相同的元素但处于不同的状态:悬停

边界半径不起作用

如何使用 Bootstrap 3 阻止按钮保持压抑状态

带有 flexbox 的 css 正方形网格

谷歌浏览器两种元素样式的区别

Bootstrap 3 Glyphicons CDN

CSS 悬停与 JavaScript 鼠标悬停

CSS 否定伪类 :not() 用于父/祖先元素

如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小

bootstrap.css 和 bootstrap-theme.css 有什么区别?