เส้นขอบข้อความโดยใช้ css (เส้นขอบรอบข้อความ)

มีวิธีรวมเส้นขอบรอบข้อความเหมือนภาพด้านล่างหรือไม่?

ใช้เงาข้อความหลายรายการ:

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:

-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-เคล็ดลับ

แน่นอน คุณสามารถใช้ CSS3 text-shadow:

text-shadow: 0 0 2px #fff;

อย่างไรก็ตามมันจะไม่แสดงในทุกเบราว์เซอร์ทันที การใช้ไลบรารีสคริปต์เช่นModernizrจะช่วยทำให้ถูกต้องในเบราว์เซอร์ส่วนใหญ่

ฉันไม่ชอบวิธีแก้ปัญหามากนักที่อาศัยการคูณเงาข้อความมันไม่ยืดหยุ่นจริงๆมันอาจใช้ได้กับเส้นขีด 2 พิกเซลโดยที่ทิศทางที่จะเพิ่มเป็น 8 แต่มีทิศทางเส้นขีด 3 พิกเซลกลายเป็น 16 และอื่น ๆ .. . ไม่สะดวกในการจัดการ

มีเครื่องมือที่เหมาะสมอยู่แล้วคือ SVG <text> ปัญหาการสนับสนุนของเบราว์เซอร์ไม่มีค่าอะไรในกรณีนี้ 'ทำให้การใช้งาน text-shadow มีปัญหาการสนับสนุนของตัวเองเช่นกัน filter: progid:DXImageTransformสามารถใช้งานได้หรือ IE <10 แต่มักไม่ได้ผลตามที่คาดไว้

สำหรับฉันแล้วทางออกที่ดีที่สุดยังคงเป็น SVG ที่มีทางเลือกในข้อความที่ไม่ลากเส้นสำหรับเบราว์เซอร์รุ่นเก่า:

approuch ประเภทนี้ใช้งานได้กับ Chrome และ Firefox ทุกเวอร์ชัน, Safari ตั้งแต่เวอร์ชัน 3.04, Opera 8, IE 9

เมื่อเทียบกับtext-shadowที่รองรับ ได้แก่ Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 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>

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

ต่อไปนี้จะครอบคลุมเบราว์เซอร์ทั้งหมดที่ควรค่าแก่การครอบคลุม:

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 */