2011-01-23 17 views
29

मैं प्रत्येक चरित्र के चारों ओर एक काला रूपरेखा जोड़ना चाहता हूं, इसलिए यदि अग्रभूमि के समान रंग पृष्ठभूमि पर फ़ॉन्ट आईडी अभी भी पठनीय है।सीएसएस - क्या पाठ में प्रत्येक चरित्र के चारों ओर एक काला रूपरेखा जोड़ना संभव है?

क्या यह सीएसएस में ब्राउज़र विशिष्ट सीएसएस के साथ या बिना किया जा सकता है?

+0

[टेक्स्ट पर रूपरेखा प्रभाव] के संभावित डुप्लिकेट (http://stackoverflow.com/questions/4919076/outline-effect-to-text) – GSerg

उत्तर

47

आप सीएसएस के साथ यह अनुकरण कर सकते हैं 2.1 text-shadow संपत्ति:

p { 
    color: #fff; 
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; 
} 

यह, बेशक, IE9 में और नीचे समर्थित नहीं है। देखें: http://www.jsfiddle.net/yijiang/UCjgg/ एक साधारण डेमो के लिए।

+0

टेक्स्ट-छाया IE9 में समर्थित नहीं है। –

+2

[यी जियांग के उत्तर] के लिए वाक्यविन्यास के बारे में उत्सुक लोगों के लिए (http://stackoverflow.com/questions/4772906/css-is-it-possible-to-add-a-black-outline-around-each-character- इन-टेक्स्ट/4772 9 14 # 4772 9 14), यह है: टेक्स्ट-छाया: एच-छाया v-shadow blur-radius color | none | प्रारंभिक | वारिस; का संदर्भ लें: [W3schools CSS3 टेक्स्ट-छाया] (http://www.w3schools.com/cssref/css3_pr_text-shadow.asp) अधिक जानकारी के लिए। –

0

शुरू करने से पहले मैं यह स्पष्ट करना चाहता हूं कि Yi Jiang's answer आपके प्रश्न के लिए सही है, वैसे भी मैं थोड़ा जोड़ना चाहता हूं।


आप ऐसा करने का संगत रास्ते की जरूरत है, एक ही रास्ता मैं के बारे में सोच सकते हैं a font with outline by design उपयोग कर रहा है।

आप Google's Font API का भी उपयोग कर सकते हैं और एक बहुत ही संगत समाधान प्राप्त कर सकते हैं।

गुड लक!

2

टेक्स्ट रूपरेखा जोड़ने के लिए एक स्पष्ट-वेबकिट तरीका है, जो -text-stroke के साथ है। यह समकक्ष मानक ट्रैक प्रस्ताव का प्रयोगात्मक कार्यान्वयन है (जिसे CSS3 spec दस्तावेज़ों में टेक्स्ट-रूपरेखा कहा जाता है)।

संबंधित मुद्दे