文字轮廓效果_编程黑洞网

CSS中有什么方法可以给不同颜色的文本提供轮廓？我想突出显示文本的某些部分以使其更直观-例如名称，链接等。更改链接颜色等现在很普遍，因此我需要一些新的内容。

@丹更好暗示不同。您的建议通常很好，但也可能扼杀创造性的实验。此外，通常不是“普通=好的”…而是“普通=勉强够好”。

@丹·格罗斯曼（Dan Grossman）：世界是由新观念演变而来的，并不是所有新事物都是卑鄙的。

@yoda您的语法不寻常。 / EDIT没关系，将您与其他人混淆了……绿色小家伙。

您能否更详细地描述您的需求。我不确定要说“将轮廓赋予不同颜色的文字”是什么意思

CSS字体边框是否可能重复？

#1 楼

CSS3中有一个名为text-stroke的实验性Webkit属性，我一直在尝试使其工作一段时间，但到目前为止仍未成功。

我已经做过的事情是使用已经支持的text-shadow属性（我相信Chrome，Firefox，Opera和IE 9支持该属性）。

使用四个阴影来模拟描边的文本：

 .strokeme {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

 <div class="strokeme">
  This text should have a stroke in some browsers
</div>

我在这里为您做了一个演示

在这里有一个悬停的示例

作为Jason C在评论中已经提到，所有主要浏览器现在都支持text-shadow CSS属性，Opera Mini除外。在哪里可以使用此解决方案以实现向后兼容性（与自动更新的浏览器无关），我相信应该使用text-stroke CSS。

可悲的是，IE10直到IE10才支持文本阴影。奇怪的是，IE9支持框阴影而不支持文本阴影。

– Web_Designer
11年11月27日在9:03

这是浏览器对text-shadow的支持的摘要。似乎当前（发布此答案后的3年），所有主流浏览器都支持它，但Opera Mini除外，它显示“部分支持”（忽略模糊半径）。

–杰森C
2014年3月29日在2:01

这会增加更细小的效果：文本阴影：-1px 0黑色，0 1px黑色，1px 0黑色，0 -1px黑色；

– BeauCielBleu
2014年9月5日在16:10

Jason C指出了文本阴影支持，而不是文本笔划。目前只有webkit支持。

– Gregoire D.
2015年2月19日在16:44

请注意，当文本颜色使用透明度/ alpha时，文本阴影技巧将失败，因为阴影将出现在文本下方。

– Uriel
16年11月13日在11:00

#2 楼

编辑：text-stroke现在已经相当成熟，并已在大多数浏览器中实现。它更容易，更清晰，更精确。如果您的浏览器读者可以支持它，则现在应该首先使用text-stroke而不是text-shadow。

您可以并且应该仅使用text-shadow效果而没有任何偏移量来做到这一点：

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

为什么
为什么？当您偏移多个阴影效果时，您会开始不舒服地注意到锯齿状的角：

将文本阴影效果仅放置在一个位置就可以消除偏移，这意味着
如果您也觉得这样可以选择较细的轮廓，而不是较暗的轮廓，这没问题-您可以重复相同的效果（保持相同的位置和模糊）几次。像这样：

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

这里只是一个效果的样本（顶部），相同的效果重复了14次（底部）：

还请注意：由于线条太细，因此最好使用-webkit-font-smoothing: antialiased关闭亚像素渲染。

有趣的答案，谢谢。我真的不明白您所说的“重复”效果是什么意思。

– edzillion
2014年7月17日在10:26

感谢字体平滑选项，它大大改善了chrome的输出！

– Meki
2014年8月15日在7:06

我注意到在答案中添加的评论是大多数浏览器现在都支持text-stroke，但caniuse仍（2016年8月）显示它在所有版本的IE和Edge中均不受支持，并且需要-webkit-text-stroke进行布局在Firefox中启用了.css.prefixes.webkit标志。 Methink认为，对于一般公共站点的支持还不够广泛。

–尼克·赖斯
16年8月17日在14:09

我认为重复14次文本阴影可能会导致性能问题。特别是在手机上滚动时。

–kaosmos
16-10-25在15:16

AFAIK笔画与通过文本阴影绘制的轮廓不同。文字描边无法使轮廓出现在文本的外部，这意味着轮廓会渗入文本，使其看起来通常很恐怖。换句话说，文字描边不能替代轮廓的文字阴影

– gman
19年3月11日在7:28

#3 楼

简单！ SVG可以解救。
这是一种简化的方法：

 svg{
  font   : bold 70px Century Gothic, Arial;
  width  : 100%;
  height : 120px;
}

text{
  fill            : none;
  stroke          : black;
  stroke-width    : .5px;
  stroke-linejoin : round;
  animation       : 2s pulsate infinite;
}

@keyframes pulsate {
  50%{ stroke-width:5px }
}

 <svg viewBox="0 0 450 50">
  <text y="50">Scalable Title</text>
</svg>

这里是一个更复杂的演示。

这是一个很好的解决方案，并且没有与文本阴影相关的性能问题。对于我的特定应用程序（大屏幕显示器上的IE 10），此方法与堆叠多个文本阴影之间的性能差异非常大。

– djskinner
2015年4月23日12:16在

这给我的效果比文本阴影好得多，因为我需要粗线。谢谢！

– Andrea
2015年9月11日下午4:27

那是纯金家伙！非常专业和熟练的方法，完美回答了问题！恭喜，此解决方案领先于W3理事会或Google或其他公司！

– Heitor
18年6月1日在23:43

如果我没有将笔画添加到textarea，那么该解决方案对我来说也是完美的:(

–白兰地
19年11月6日，0：32

#4 楼

您可以尝试堆叠多个模糊的阴影，直到阴影看起来像笔触为止，如下所示：

.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

这里有个小提琴：http://jsfiddle.net/GGUYY/

我提到它只是为了以防万一有人感兴趣，尽管我不会称其为解决方案，因为它以各种方式失败：旧版IE
在每个浏览器中的呈现方式都大不相同
应用如此多的阴影非常繁琐：S

这真是一个简单而绝妙的主意！

–user133408
2014年4月24日在8:16

谢谢，这是性能问题，请谨慎使用:)

–brohr
2014年5月16日14:36

这是太棒了。阴影的额外层确实增加了它的深度，并且可以在IE11，FF36和Chrome 41中使用。

– RockiesMagicNumber
15年4月2日在22:16

#5 楼

只需添加此答案。 “描边”文本与“概述”不同。

概述看起来很棒。抚摸看起来很可怕。

其他地方列出的SVG解决方案也有同样的问题。要获得轮廓，您需要将文本放置两次。一次抚摸一次又不抚摸一次。

描边不是轮廓

 body {
  font-family: sans-serif;
  margin: 20px;
}

.stroked {
  color: white;
  -webkit-text-stroke: 1px black;
}

.thickStroked {
  color: white;
  -webkit-text-stroke: 10px black;
}

.outlined {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.thickOutlined {
  color: white;
text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000
}

svg {
  font-size: 40px;
  font-weight: bold;
  width: 450px;
  height: 70px;
  fill: white;
}

.svgStroke {
  fill: white;
  stroke: black;
  stroke-width: 20px;
  stroke-linejoin: round;
}

 <h1 class="stroked">Properly stroked!</h1>
<h1 class="outlined">Properly outlined!</h1>

<h1 class="thickStroked">Thickly stroked!</h1>
<h1 class="thickOutlined">Thickly outlined!</h1>

<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text>
</svg>
<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text>
  <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text>
</svg>

PS：我很想知道如何使SVG成为任意文本的正确大小。我感觉涉及到生成svg，使用javascript查询以获取范围然后应用结果是相当复杂的。如果有一种更简单的非js方式，我想知道。

好的，这是正确的方法，概述而不是抚摸。作品精美，眼睛整洁，轻松。

– MitchellK
19年8月2日在10:38

#6 楼

我一直在寻找一种跨浏览器的文本笔划解决方案，该解决方案可以覆盖背景图像。我认为我有一个解决方案，它不涉及额外的标记，js，并且可以在IE7-9中运行（我还没有测试6），并且不会引起混叠问题。

这是结合使用CSS3文本阴影（对IE（http://caniuse.com/#search=text-shadow）除外）具有良好的支持，然后对IE使用过滤器的组合。目前对CSS3文本笔触的支持还很差。 /）看起来很糟糕，所以我没有使用它。

David Hewitt的答案包括在多个方向上添加阴影过滤器。不幸的是，然后清除了ClearType，所以我们最终得到了别名严重错误的文本。

然后我将useragentman上建议的一些元素与阴影过滤器组合在一起。 />
此示例为带有白色笔触的黑色文本。我正在使用条件html类来定位IE（http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-nether/）。

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

这也适用于较旧的IE：filter：glow（color = white，strength = 1）;

–mch
2015年11月14日在11:02

#7 楼

使用6种不同的阴影可获得更好的效果：

.strokeThis{
    text-shadow:
    -1px -1px 0 #ff0,
    0px -1px 0 #ff0,
    1px -1px 0 #ff0,
    -1px 1px 0 #ff0,
    0px 1px 0 #ff0,
    1px 1px 0 #ff0;
}

我想要一个更大的阴影，并且不得不添加一些额外的行。...3px 0px 0＃343a7e，-3px 0px 0＃343a7e

–杰登·劳森（Jayden Lawson）
16-09-21在8:04

#8 楼

 h1 {
   color: black;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

 <h1>Properly stroked!</h1>

请注意，即使在2020年，这也不适用于可变字体。 github.com/rsms/inter/issues/292

–加雷斯
20-10-9在4:12

#9 楼

使用8轴时，此SASS混合器将提供平滑的结果：

@mixin stroke($size: 1px, $color: #000) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

和普通CSS：

#10 楼

使用较粗的笔触会有点混乱，如果您乐于使用无聊的混音，请尝试这种混音，不是很完美，根据笔触的重量，它会生成相当数量的css。

 @mixin stroke($width, $colour: #000000) {
      $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
      @for $i from 0 through $width {
          $shadow: $shadow,
          -$i + px -$width + px 0 $colour,
          $i + px -$width + px 0 $colour,
          -$i + px $width + px 0 $colour,
          $i + px $width + px 0 $colour,
          -$width + px -$i + px 0 $colour,
          $width + px -$i + px 0 $colour,
          -$width + px $i + px 0 $colour,
          $width + px $i + px 0 $colour,
      }
      text-shadow: $shadow;
}

这个mixin不适用于我，但是这个对我有用：gist.github.com/nathggns/2984123

– akrk
2014年5月4日在9:36

#11 楼

多个文本阴影..
类似的东西：

var steps = 10,
    i,
    R = 0.6,
    x,
    y,
    theStyle = '1vw 1vw 3vw #005dab';
for (i = -steps; i <= steps; i += 1) {
    x = (i / steps) / 2;
    y = Math.sqrt(Math.pow(R, 2) - Math.pow(x, 2));
    theStyle = theStyle + ',' + x.toString() + 'vw ' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + x.toString() + 'vw -' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',-' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
}
document.getElementsByTagName("H1")[0].setAttribute("style", "text-shadow:" + theStyle);

演示：http://jsfiddle.net/punosound/gv6zs58m/

#12 楼

文字阴影生成器

这里有很多不错的答案。看起来文本阴影可能是执行此操作的最可靠方法。因为其他人已经做到了，所以我不会详细介绍如何使用文本阴影，但是基本思想是在文本元素周围创建多个文本阴影。文字轮廓越大，您需要的文字阴影就越多。

所有提交的答案（截至本发布之日）为文字阴影提供了静态解决方案。我采用了不同的方法，并编写了此JSFiddle，它接受轮廓颜色，模糊和宽度值作为输入，并为您的元素生成适当的text-shadow属性。只需填写空白，检查预览，然后单击以复制css并将其粘贴到样式表中。

不需要的附录

显然，包括除非它们还包含代码，否则无法发布指向JSFiddle的链接。如果需要，您可以完全忽略此附录。这是我的小提琴产生的JavaScript，它生成了text-shadow属性。请注意，您不需要在自己的作品中实现此代码：

function computeStyle() {
    var width = document.querySelector('#outline-width').value;
  width = (width === '') ? 0 : Number.parseFloat(width);
  var blur = document.querySelector('#outline-blur').value;
  blur = (blur === '') ? 0 : Number.parseFloat(blur);
  var color = document.querySelector('#outline-color').value;
  if (width < 1 || color === '') {
    document.querySelector('.css-property').innerText = '';
    return;
  }
    var style = 'text-shadow: ';
  var indent = false;
    for (var i = -1 * width; i <= width; ++i) {
    for (var j = -1 * width; j <= width; ++j) {
        if (! (i === 0 && j === 0 && blur === 0)) {
        var indentation = (indent) ? '\u00a0\u00a0\u00a0\u00a0' : '';
            style += indentation + i + "px " + j + "px " + blur + "px " + color + ',\n';
        indent = true;
      }
    }
  }
  style = style.substring(0, style.length - 2) + '\n;';
  document.querySelector('.css-property').innerText = style;

  var exampleBackground = document.querySelector('#example-bg');
  var exampleText = document.querySelector('#example-text');
  exampleBackground.style.backgroundColor = getOppositeColor(color);
  exampleText.style.color = getOppositeColor(color);
  var textShadow = style.replace(/text-shadow: /, '').replace(/\n/g, '').replace(/.$/, '').replace(/\u00a0\u00a0\u00a0\u00a0/g, '');
  exampleText.style.textShadow = textShadow;
}

#13 楼

我也遇到了这个问题，并且text-shadow不是一个选择，因为拐角看起来很糟糕（除非我有很多阴影），而且我也不想有任何模糊，因此，我唯一的选择是执行以下操作：有2个div，对于背景div，在其上放一个-webkit-text-stroke，然后可以根据需要任意选择轮廓。

 div {
  font-size: 200px;
  position: absolute;
  white-space: nowrap;
}

.front {
 color: blue;
}

.outline {
  -webkit-text-stroke: 30px red;
  user-select: none;
}

 <div class="outline">
 outline text
</div>

<div class="front">
 outline text
</div>

使用此方法，我可以实现轮廓，因为如果希望文本在较大轮廓下保持清晰（因为使用stroke-width轮廓），则无法使用stroke-width方法将在字母内部开始，当宽度大于字母时，字母将变得不清晰。我想在文字周围涂上白色的晕圈。此解决方案非常适合我。

这里是显示此解决方案的小提琴

#14 楼

这是CSS文件，希望您能得到想要的

/* ----- Logo ----- */

#logo a {
    background-image:url('../images/wflogo.png'); 
    min-height:0;
    height:40px;
    }
* html #logo a {/* IE6 png Support */
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop");
}

/* ----- Backgrounds ----- */
html{
    background-image:none;  background-color:#336699;
}
#logo{
    background-image:none;  background-color:#6699cc;
}
#container, html.embed{
    background-color:#FFFFFF;
}
.safari .wufoo input.file{
    background:none;
    border:none;
}

.wufoo li.focused{
    background-color:#FFF7C0;
}
.wufoo .instruct{
    background-color:#F5F5F5;
}

/* ----- Borders ----- */
#container{
    border:0 solid #cccccc;
}
.wufoo .info, .wufoo .paging-context{
    border-bottom:1px dotted #CCCCCC;
}
.wufoo .section h3, .wufoo .captcha, #payment .paging-context{
    border-top:1px dotted #CCCCCC;
}
.wufoo input.text, .wufoo textarea.textarea{

}
.wufoo .instruct{
    border:1px solid #E6E6E6;
}
.fixed .info{
    border-bottom:none;
}
.wufoo li.section.scrollText{
    border-color:#dedede;
}

/* ----- Typography ----- */
.wufoo .info h2{
    font-size:160%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#000000;
}
.wufoo .info div{
    font-size:95%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}
.wufoo .section h3{
    font-size:110%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#000000;
}
.wufoo .section div{
    font-size:85%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}

.wufoo label.desc, .wufoo legend.desc{
    font-size:95%;
    font-family:inherit;
    font-style:normal;
    font-weight:bold;
    color:#444444;
}

.wufoo label.choice{
    font-size:100%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}
.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file, .wufoo select.select{
    font-style:normal;
    font-weight:normal;
    color:#333333;
    font-size:100%;
}
{* Custom Fonts Break Dropdown Selection in IE *}
.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file{ 
    font-family:inherit;
}


.wufoo li div, .wufoo li span, .wufoo li div label, .wufoo li span label{
    font-family:inherit;
    color:#444444;
}
.safari .wufoo input.file{ /* Webkit */
    font-size:100%;
    font-family:inherit;
    color:#444444;
}
.wufoo .instruct small{
    font-size:80%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}

.altInstruct small, li.leftHalf small, li.rightHalf small,
li.leftThird small, li.middleThird small, li.rightThird small,
.iphone small{
    color:#444444 !important;
}

/* ----- Button Styles ----- */

.wufoo input.btTxt{

}

/* ----- Highlight Styles ----- */

.wufoo li.focused label.desc, .wufoo li.focused legend.desc,
.wufoo li.focused div, .wufoo li.focused span, .wufoo li.focused div label, .wufoo li.focused span label,
.safari .wufoo li.focused input.file{ 
    color:#000000;
}

/* ----- Confirmation ----- */

.confirm h2{
    font-family:inherit;
    color:#444444;
}
a.powertiny b, a.powertiny em{
    color:#1a1a1a !important;
}
.embed a.powertiny b, .embed a.powertiny em{
    color:#1a1a1a !important;
}

/* ----- Pagination ----- */

.pgStyle1 var, .pgStyle2 var, .pgStyle2 em, .page1 .pgStyle2 var, .pgStyle1 b, .wufoo .buttons .marker{
    font-family:inherit;
    color:#444444;
}
.pgStyle1 var, .pgStyle2 td{
    border:1px solid #cccccc;
}
.pgStyle1 .done var{
    background:#cccccc;
}

.pgStyle1 .selected var, .pgStyle2 var, .pgStyle2 var em{
    background:#FFF7C0;
    color:#000000;
}
.pgStyle1 .selected var{
    border:1px solid #e6dead;
}


/* Likert Backgrounds */

.likert table{
    background-color:#FFFFFF;
}
.likert thead td, .likert thead th{
    background-color:#e6e6e6;
}
.likert tbody tr.alt td, .likert tbody tr.alt th{
    background-color:#f5f5f5;
}

/* Likert Borders */

.likert table, .likert th, .likert td{
    border-color:#dedede;
}
.likert td{
    border-left:1px solid #cccccc;
}

/* Likert Typography */

.likert caption, .likert thead td, .likert tbody th label{
    color:#444444;
    font-family:inherit;
}
.likert tbody td label{
    color:#575757;
    font-family:inherit;
}
.likert caption, .likert tbody th label{
    font-size:95%;
}

/* Likert Hover */

.likert tbody tr:hover td, .likert tbody tr:hover th, .likert tbody tr:hover label{
    background-color:#FFF7C0;
    color:#000000;
}
.likert tbody tr:hover td{
    border-left:1px solid #ccc69a;
}

/* ----- Running Total ----- */

.wufoo #lola{
    background:#e6e6e6;
}
.wufoo #lola tbody td{
    border-bottom:1px solid #cccccc;
}
.wufoo #lola{
    font-family:inherit;
    color:#444444;
}
.wufoo #lola tfoot th{
    color:#696969;
}

/* ----- Report Styles ----- */

.wufoo .wfo_graph h3{
    font-size:95%;
    font-family:inherit;
    color:#444444;
}
.wfo_txt, .wfo_graph h4{
    color:#444444;
}
.wufoo .footer h4{
    color:#000000;
}
.wufoo .footer span{
    color:#444444;
}

/* ----- Number Widget ----- */

.wfo_number{
    background-color:#f5f5f5;
    border-color:#dedede;
}
.wfo_number strong, .wfo_number em{
    color:#000000;
}

/* ----- Chart Widget Border and Background Colors ----- */

#widget, #widget body{
    background:#FFFFFF;
}
.fcNav a.show{
    background-color:#FFFFFF;
    border-color:#cccccc;
}
.fc table{
    border-left:1px solid #dedede;  
}
.fc thead th, .fc .more th{
    background-color:#dedede !important;
    border-right:1px solid #cccccc !important;
}
.fc tbody td, .fc tbody th, .fc tfoot th, .fc tfoot td{
    background-color:#FFFFFF;
    border-right:1px solid #cccccc;
    border-bottom:1px solid #dedede;
}
.fc tbody tr.alt td, .fc tbody tr.alt th, .fc tbody td.alt{
    background-color:#f5f5f5;
}

/* ----- Chart Widget Typography Colors ----- */

.fc caption, .fcNav, .fcNav a{
    color:#444444;
}
.fc tfoot, 
.fc thead th,
.fc tbody th div, 
.fc tbody td.count, .fc .cards tbody td a, .fc td.percent var,
.fc .timestamp span{
    color:#000000;
}
.fc .indent .count{
    color:#4b4b4b;
}
.fc .cards tbody td a span{
    color:#7d7d7d;
}

/* ----- Chart Widget Hover Colors ----- */

.fc tbody tr:hover td, .fc tbody tr:hover th,
.fc tfoot tr:hover td, .fc tfoot tr:hover th{
    background-color:#FFF7C0;
}
.fc tbody tr:hover th div, .fc tbody tr:hover td, .fc tbody tr:hover var,
.fc tfoot tr:hover th div, .fc tfoot tr:hover td, .fc tfoot tr:hover var{
    color:#000000;
}

/* ----- Payment Summary ----- */

.invoice thead th, 
.invoice tbody th, .invoice tbody td,
.invoice tfoot th,
.invoice .total,
.invoice tfoot .last th, .invoice tfoot .last td,
.invoice tfoot th, .invoice tfoot td{
    border-color:#dedede;
}
.invoice thead th, .wufoo .checkNotice{
    background:#f5f5f5;
}
.invoice th, .invoice td{
    color:#000000;
}
#ppSection, #ccSection{
    border-bottom:1px dotted #CCCCCC;
}
#shipSection, #invoiceSection{
    border-top:1px dotted #CCCCCC;
}

/* Drop Shadows */

/* - - - Local Fonts - - - */

/* - - - Responsive - - - */

@media only screen and (max-width: 480px) {
    html{
        background-color:#FFFFFF;
    }
    a.powertiny b, a.powertin em{
        color:#1a1a1a !important;
    }
}

/* - - - Custom Theme - - - */

请详细说明您的解决方案。即使它确实起作用，我们也不知道如何使用它。

–帕特里克·霍夫曼（Patrick Hofman）
2014年1月30日8:08

我希望正确的解决方案不必占用200行CSS。

– dardub
17年4月20日在6:01

这个答案根本没有任何意义。

–超级照明
17年5月10日在13:59