Question

我想在我的信件中添加白色背景。

我有一个图像作为示例，但我想用CSS构建此图像。

home button http://i60.tinypic.com/2rgp01c.png

要查看差异，请使用编辑器编辑html并添加黑色作为正文背景。

我用文字阴影试过这个，但它并没有很好用。我的问题是如何用css构建它？

亲切的问候，

iTouch的

Answer 1

我相信文字阴影是唯一的出路。类似的东西：

text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff

演示：http://codepen.io/mbrillaud/pen/zGxdMQ

Answer 2

我有一个解决方案，它并没有真正回答你的问题，但它仍然可能有所帮助（我希望）。

您可以使用SVG和stroke-linejoin。

<svg height="100" width="250">
  <text 
        x="0" 
        y="50" 
        fill="red"
        stroke="#ffffff"
        stroke-width="3px"
        font-size="50px"
        letter-spacing="-4"
        stroke-linejoin="round"
        stroke-linecap="round"
        font-weight="600">I love SVG!</text>
</svg>

JSBIN：http://jsbin.com/zemeya/2/edit?html,css,output

编辑：我将字体更改为更加时髦，在头标记之间添加此行。

<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

Answer 3

它是text-shadow和letter-spacing的组合。

首先，你需要一个坚实的边界＆＃34;围绕你的文字。为此用途：

text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff,
            -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff

但并非全部。由于还有另一个有点模糊的阴影，你必须添加另一个文字阴影：

text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff,
            -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff,
            2px 2px 3px #000;

现在你可以删除一些字母间距。你可以通过使用一个负值来做到这一点：

letter-spacing: -6px;

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Chewy);

span {
    font-family: 'Chewy', cursive;
    letter-spacing: -6px;
    font-size:50px;
    color:#555;
    text-shadow:-1px 0 #fff,
				0 1px #fff,
				1px 0 #fff,
				0 -1px #fff,
				-2px 0 #fff,
				0 2px #fff,
				2px 0 #fff,
				0 -2px #fff,
				2px 2px 3px #000;
}

＆＃13;

<span>home</span>

＆＃13;

Demo

Answer 4

您可以使用text-shadow属性，但是您必须使用堆叠值来实现更粗的笔划：

＆＃13;

body {
	background-color: #ddd;
}
p {
	font-size: 52px;
	color: #666666;
	text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,
		4px 4px 6px #000, 4px 4px 6px #000;
}

＆＃13;

<p>home</p>

＆＃13;

同样在codepen。

Answer 5

您可以使用CSS中的text-shadow对文本执行彩色轮廓。诀窍是你必须做多个阴影：

.white_background {
    text-shadow: 0px 0px 1px #fff,
    0px 0px 1px #fff,
    0px 0px 1px #fff,
    0px 0px 1px #fff;
}

CSS支持多个text-shadow列表。每个列表与其他列表堆叠在一起。如果你积累足够的东西，它们会呈现出坚实的轮廓。

CSS文本效果白色背景

5 个答案: