Are there any ways in CSS to give outlines to text with different colors ? I want to highlight some parts of my text to make it more intuitive - like the names, links, etc. Changing the link colors etc. are common nowadays, so I want something new.
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
由 
翻译强力驱动
翻译强力驱动问题:
回答1:
There is an experimental webkit property called text-stroke in CSS3, I've been trying to get this to work for some time but have been unsuccessful so far.
What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe).
Use four shadows to simulate a stroked text:
HTML:
This text should have a stroke in some browsers CSS:
.strokeme { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } I have made a demo for you here
And a hovered example is available here
As Jason C has mentioned in the comments, the text-shadow CSS property is now supported by all major browsers, with the exception of Opera Mini. Where this solution will work for backwards compatibility (not really an issue regarding browsers that auto-update) I believe the text-stroke CSS should be used.
回答2:
Edit: text-stroke is now fairly mature and implemented in most browsers. It is easier, sharper and more precise. If your browser audience can support it, you should now use text-stroke first, instead of text-shadow.
You can and should do this with just the text-shadow effect without any offsets:
.outline { color: #fff; text-shadow: #000 0px 0px 1px; -webkit-font-smoothing: antialiased; } Why? When you offset multiple shadow effects, you’ll begin to notice ungainly, jagged corners:
Having text-shadow effects in just one position eliminates the offsets, meaning If you feel that’s too thin and would prefer a darker outline instead, no problem ― you can repeat the same effect (keeping the same position and blur), several times. Like so:
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; Here’s a sample of just one effect (top), and the same effect repeated 14 times (bottom):
Also note: Because the lines become so thin, it’s a very good idea to turn off sub-pixel rendering using-webkit-font-smoothing: antialiased.
回答3:
Easy! SVG to the rescue.
This is a simplified method:
svg{ font: bold 50px 'Arial'; width: 50%;. height: 50px; } text{ fill: none; stroke: red; stroke-width:2px; // stroke-dasharray: 2,2; stroke-linejoin: round; }Here's a more complex demo.
回答4:
You could try stacking multiple blured shadows until the shadows look like a stroke, like so:
.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; } Here's a fiddle: http://jsfiddle.net/GGUYY/
I mention it just in case someone's interested, although I wouldn't call it a solution because it fails in various ways:
- it doesn't work in old IE
- it renders quite differently in every browser
- applying so many shadows is very heavy to process :S
回答5:
I was looking for a cross-browser text-stroke solution that works when overlaid on background images. think I have a solution for this that doesn't involve extra mark-up, js and works in IE7-9 (I haven't tested 6), and doesn't cause aliasing problems.
This is a combination of using CSS3 text-shadow, which has good support except IE (http://caniuse.com/#search=text-shadow), then using a combination of filters for IE. CSS3 text-stroke support is poor at the moment.
IE Filters
The glow filter (http://www.impressivewebs.com/css3-text-shadow-ie/) looks terrible, so I didn't use that.
David Hewitt's answer involved adding dropshadow filters in a combination of directions. ClearType is then removed unfortunately so we end up with badly aliased text.
I then combined some of the elements suggested on useragentman with the dropshadow filters.
Putting it together
This example would be black text with a white stroke. I'm using conditional html classes by the way to target 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:
I got better results with 6 different shadows:
.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; } 回答7:
Working with thicker strokes gets a bit messy, if you have the pleasure of sass try this mixin, not perfect and depending on stroke weight it generates a fair amount of 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; } 回答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; }Properly stroked!
回答9:
This mixin for SASS will give smooth results, using 8-axis:
@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; } And normal CSS:
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; 回答10:
Multiple text-shadows..
Something like this:
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); 回答11:
Here is CSS file hope you will get wht u want
/* ----- 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:#FFF