对文本的轮廓效果
CSS中有没有什么方法可以给不同颜色的文字提供轮廓？ 我想突出显示文本的某些部分，使其更直观 – 如名称，链接等。更改链接颜色等现在很常见，所以我想要新的东西。
在CSS3中有一个名为text-stroke的实验性webkit属性，我一直试图让这个工作一段时间，但到目前为止一直没有成功。
我所做的是使用已经支持的text-shadow属性（我相信在Chrome，Firefox，Opera和IE 9中支持）。
使用四个阴影来模拟描边文字：
HTML：
<div class="strokeme"> This text should have a stroke in some browsers </div>
CSS：
.strokeme { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
我在这里为你做了一个演示
这里有一个悬浮的例子
正如Jason C在评论中提到的那样，除了Opera Mini，现在所有主stream浏览器都支持CSS text-shadow属性。 在这个解决scheme将工作向后兼容性（不是一个关于自动更新的浏览器的问题）我相信应该使用text-stroke CSS。
编辑： text-stroke 现在相当成熟，并在大多数浏览器中实现 。 这是更容易，更清晰，更精确。 如果您的浏览器受众可以支持它，那么现在应该首先使用text-stroke ，而不是text-shadow 。
你可以也应该这样做，只是没有任何偏移的text-shadow效果：
.outline { color: #fff; text-shadow: #000 0px 0px 1px; -webkit-font-smoothing: antialiased; }
为什么？ 当你抵消多个阴影效果时，你会开始注意到粗糙的angular落： 
在一个位置上有文字 – 阴影效果消除了偏移，意思是如果你觉得太薄，宁愿select较暗的轮廓，也没有问题 – 你可以重复同样的效果（保持相同的位置和模糊），多次。 像这样：
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次（底部）：
另请注意：由于线条变得如此薄，因此closures使用的亚像素渲染是一个非常好的主意
-webkit-font-smoothing: antialiased 。
简单！ SVG来拯救。
这是一个简化的方法：
svg{ font: bold 50px 'Arial'; width: 50%;. height: 50px; } text{ fill: none; stroke: red; stroke-width:2px; // stroke-dasharray: 2,2; stroke-linejoin: round; }
<svg viewBox="0 0 350 50"> <text y="40">Scalable Title</text> </svg>
您可以尝试堆叠多个模糊的阴影，直到阴影看起来像笔画，如下所示：
.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/
我提到它只是为了防止某人感兴趣，尽pipe我不会将其称为解决scheme，因为它以各种方式失败：
- 它不适用于旧的IE
- 它在每个浏览器中都呈现得非常不同
- 申请这么多的阴影是非常重的处理：S
我正在寻找一种跨浏览器的文字笔画解决scheme，可以在叠加在背景图片上时使用。 认为我有一个解决scheme，这不涉及额外的标记，JS和IE7-9（我没有testing6），并不会导致别名问题。
这是一个使用CSS3文字阴影的组合，除了IE（ http://caniuse.com/#search=text-shadow ）之外，还有很好的支持，然后使用IE的filter组合。 现在CSS3文本笔画支持很差。
IE筛选器
辉光filter（ http://www.impressivewebs.com/css3-text-shadow-ie/ ）看起来很糟糕，所以我没有使用它。
David Hewitt的回答是在方向组合中添加阴影滤镜。 然后不幸的是删除了ClearType，所以我们结束了严重的别名文本。
然后，我将useragentman上的一些元素与dropshadow滤镜结合起来。
把它放在一起
这个例子是黑色的文字，白色的笔画。 我正在使用有条件的HTML类的方式来定位IE浏览器（ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ）。
#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; }
我用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; }
用较粗的笔画工作会有点混乱，如果你有尝试这种混合的乐趣，而不是完美的，并根据笔画的重量产生相当数量的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; }
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>
多个文字阴影
像这样的东西：
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/
这里是CSS文件希望你会得到你想要的
/* ----- Logo ----- */ #logo a { background-image:url('..http://img.dovov.comwflogo.png'); min-height:0; height:40px; } * html #logo a {/* IE6 png Support */ background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="..http://img.dovov.comwflogo.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 - - - */
