सीएसएस का उपयोग करके टेक्स्ट बॉर्डर (टेक्स्ट के चारों ओर बॉर्डर)

Question

क्या नीचे छवि की तरह पाठ के चारों ओर एक सीमा को एकीकृत करने का एक तरीका है?

Answer 1

कई पाठ छाया का उपयोग करें:

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

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

<h1>test</h1>

वैकल्पिक रूप से, आप टेक्स्ट स्ट्रोक का उपयोग कर सकते हैं, जो केवल वेबकिट में काम करता है:

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}

<h1>test</h1>

इसे CSS-Tricks के रूप में भी पढ़ें ।

Comments

WORTH NOTING: कृपया इन तरीकों की क्रॉस-ब्राउजर क्षमताओं का परीक्षण करें ... IE पर ग्राहकों के साथ गंभीर मुद्दे होने के कारण कम से कम 9 .. पीएनजी तरीके से जाने की सोच रहे हैं।

— एरिकबेस्ट

@ErickBest दूसरा लिंक IE9 समस्याओं का उल्लेख करता है। हालाँकि इस पृष्ठ को Google caniuse.com/css-textshadow

— AnnanFay

पारदर्शिता के साथ पाठ के लिए खराब प्रदर्शन का कारण बनता है (आरजीबीए का उपयोग करके)।

— अलेजांद्रो नावा

Answer 2

ज़रूर। आप CSS3 का उपयोग कर सकते हैं text-shadow:

text-shadow: 0 0 2px #fff;

हालाँकि यह अभी सभी ब्राउज़रों में दिखाई नहीं देगा। हालांकि मॉर्डनिज़्र जैसी स्क्रिप्ट लाइब्रेरी का उपयोग करना अधिकांश ब्राउज़रों में सही होने में मदद करेगा।

Comments

मैंने पहले ही कोशिश की थी कि साहब लेकिन मुझे जो चाहिए वह है टेक्स्ट के चारों ओर एक सफ़ेद।

— jho1086

Answer 3

मुझे टेक्स्ट-शैडो को गुणा करने के आधार पर इतना अधिक समाधान पसंद नहीं है, यह वास्तव में लचीला नहीं है, यह 2 पिक्सेल स्ट्रोक के लिए काम कर सकता है, जहां जोड़ने के लिए दिशा-निर्देश 8 हैं, लेकिन सिर्फ 3 पिक्सेल स्ट्रोक के साथ निर्देश 16 हो गए, और इसी तरह ।। वास्तव में प्रबंधन करने के लिए असुविधाजनक नहीं है।

सही उपकरण मौजूद है, यह SVG है <text> ब्राउज़र्स की समर्थन समस्या इस मामले में कुछ भी नहीं है, क्योंकि टेक्स्ट-शैडो के उपयोग की अपनी समर्थन समस्या भी है, filter: progid:DXImageTransformइसका उपयोग या IE <10 किया जा सकता है , लेकिन अक्सर यह अपेक्षित रूप से काम नहीं करता है।

मेरे लिए सबसे अच्छा समाधान एसवीजी रहता है जो पुराने ब्राउज़र के लिए बिना स्ट्रोक वाले टेक्स्ट में गिरावट के साथ है:

इस तरह का ऐपप्रोच क्रोम और फ़ायरफ़ॉक्स के सभी संस्करणों, सफारी पर संस्करण 3.04, ओपेरा 8, IE 9 के बाद से काम करता है

text-shadowजिनके समर्थन की तुलना में: क्रोम 4.0, एफएफ 3.5, आईई 10, सफारी 4.0, ओपेरा 9, यह और भी अधिक संगत परिणाम देता है।

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }

<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>

Comments

अपना समाधान साझा करने के लिए धन्यवाद। मुझे लगता है कि आपका अधिकार अधिक लचीला है। लेकिन ज्यादातर समय यह सीएसएस का उपयोग करने के लिए अधिक कुशल होता है। मैं बाद में एसवीजी का उपयोग करने की कोशिश करूंगा।

— jho1086

Answer 4

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Comments

क्या आप एक स्पष्टीकरण भी जोड़ सकते हैं?

— रॉबर्ट

Answer 5

निम्नलिखित सभी ब्राउज़रों को कवर करने लायक होगा:

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */