เค้าร่างเอฟเฟกต์ข้อความ


329

มีวิธีใดบ้างใน CSS ที่จะให้เค้าร่างข้อความกับสีที่ต่างกัน? ฉันต้องการเน้นบางส่วนของข้อความเพื่อทำให้เข้าใจง่ายขึ้นเช่นชื่อลิงค์ ฯลฯ การเปลี่ยนสีลิงค์เป็นต้นเป็นเรื่องธรรมดาในปัจจุบันดังนั้นฉันต้องการสิ่งใหม่


17
@Dan Better แปลว่าต่างกัน คำแนะนำของคุณโดยทั่วไปดี แต่ก็สามารถยับยั้งการทดลองเชิงสร้างสรรค์ได้เช่นกัน นอกจากนี้มักจะไม่“ ดี = ดี” … แต่เป็น“ ธรรมดา = แทบไม่ดีพอ”
Konrad Rudolph

7
@Dan Grossman: โลกวิวัฒนาการจากแนวคิดใหม่ไม่ใช่ทุกสิ่งใหม่ที่น่ารังเกียจ
yoda

7
@yoda ไวยากรณ์ของคุณผิดปกติ / แก้ไขไม่เป็นไรสับสนคุณกับคนอื่น…เพื่อนสีเขียวเล็กน้อย
Konrad Rudolph

คุณช่วยอธิบายสิ่งที่คุณต้องการในรายละเอียดเพิ่มเติมได้ไหม ฉันไม่แน่ใจว่าสิ่งที่คุณหมายถึงเมื่อคุณพูดว่าคุณต้องการ 'ให้เค้าร่างข้อความด้วยสีที่แตกต่าง'
Yi Jiang

1
เป็นไปได้ที่ซ้ำกันของCSS Font Border?
อดัมเซ่น

คำตอบ:


453

มีคุณสมบัติ webkit ทดลองที่เรียกว่าtext-strokeใน CSS3 ฉันพยายามทำให้มันใช้งานได้ซักพัก แต่ก็ยังไม่สำเร็จ

สิ่งที่ฉันทำไปแทนที่จะใช้text-shadowคุณสมบัติที่รองรับแล้ว(รองรับใน Chrome, Firefox, Opera และ IE 9 ที่ฉันเชื่อ)

ใช้สี่เงาเพื่อจำลองข้อความที่ลูบ:

.strokeme {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<div class="strokeme">
  This text should have a stroke in some browsers
</div>

ฉันได้สาธิตให้คุณที่นี่

และเป็นตัวอย่างที่วนเวียนอยู่คืออยู่ที่นี่


ตามที่ Jason C ได้กล่าวไว้ในความคิดเห็นtext-shadowตอนนี้คุณสมบัติ CSS ได้รับการสนับสนุนโดยเบราว์เซอร์หลักทั้งหมดยกเว้น Opera Mini ที่โซลูชันนี้จะทำงานเพื่อความเข้ากันได้ย้อนหลัง (ไม่ใช่ปัญหาเกี่ยวกับเบราว์เซอร์ที่อัปเดตอัตโนมัติ) ฉันเชื่อว่าtext-strokeควรใช้ CSS


12
น่าเศร้าที่ IE ไม่รองรับtext-shadowจนถึง IE10 ผิดปกติพอ IE9 สนับสนุนแต่ไม่box-shadow text-shadow
Web_Designer

14
นี่คือบทสรุปของการสนับสนุนสำหรับเบราว์เซอร์ text-shadowดูเหมือนว่าในปัจจุบัน (3 ปีหลังจากคำตอบนี้ถูกโพสต์) มันได้รับการสนับสนุนโดยเบราว์เซอร์หลักทั้งหมดยกเว้น Opera Mini ซึ่งแสดงว่า "การสนับสนุนบางส่วน" (ละเว้นblur-radius)
Jason C

3
สิ่งนี้จะเพิ่มเอฟเฟกต์ที่บางกว่า:text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
BeauCielBleu

29
ชื่อชั้นดีเลิศ
พลเมือง conn

4
เจสันซีชี้ให้เห็นการสนับสนุนไม่ได้text-shadow text-strokeซึ่ง webkit รองรับในเวลานี้เท่านั้น
Gregoire D.

100

แก้ไข: คือตอนนี้ค่อนข้างเป็นผู้ใหญ่และดำเนินการในเบราว์เซอร์ส่วนใหญ่text-stroke ง่ายขึ้นคมชัดและแม่นยำยิ่งขึ้น หากผู้ชมเบราว์เซอร์ของคุณสามารถสนับสนุนมันตอนนี้คุณควรใช้ครั้งแรกแทนtext-stroketext-shadow


คุณสามารถและควรทำสิ่งนี้ด้วยเอtext-shadowฟเฟกต์โดยไม่มีการชดเชยใด ๆ :

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

ทำไม? เมื่อคุณชดเชยเอฟเฟ็กต์เงาหลาย ๆ ค่าคุณจะเริ่มสังเกตเห็นมุมที่ไม่แน่นอนที่เป็นรอยหยัก: เอฟเฟกต์เงาชดเชยผลลัพธ์ในมุมขรุขระที่เห็นได้ชัดเจน


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

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 ครั้ง (ด้านล่าง):


ข้อความตัวอย่างที่แสดงด้วย text-shadow

นอกจากนี้ยังทราบ:
-webkit-font-smoothing: antialiasedเนื่องจากเส้นกลายเป็นบางอย่างนั้นมันเป็นความคิดที่ดีมากในการปิดการแสดงผลย่อยพิกเซลใช้


คำตอบที่น่าสนใจขอบคุณ ฉันไม่เข้าใจจริงๆว่าคุณหมายถึงอะไรโดย 'ทำซ้ำ' ผลกระทบ
edzillion

ขอบคุณสำหรับfont-smoothingตัวเลือกมันปรับปรุงการส่งออกในโครเมี่ยมอย่างมาก!
เมก

1
ฉันสังเกตเห็นความคิดเห็นที่เพิ่มลงในคำตอบที่สนับสนุนการอ่านลายนิ้วมือในเบราว์เซอร์ส่วนใหญ่ แต่ caniuse ยังคง (สิงหาคม 2559) แสดงว่าไม่รองรับในทุกเวอร์ชันของ IE และ Edge และต้องการ -webkit-text-stroke ด้วยเลย์เอาต์ .css.prefixes.webkit เปิดใช้งานการตั้งค่าสถานะใน Firefox Methinks ที่ไม่ได้รับการสนับสนุนอย่างกว้างขวางเพียงพอสำหรับเว็บไซต์สาธารณะทั่วไป
นิคไรซ์

1
ฉันคิดว่าการทำซ้ำ 14 ครั้งเงาข้อความอาจมีปัญหาประสิทธิภาพการทำงานบางอย่าง โดยเฉพาะอย่างยิ่งเมื่อเลื่อนบนมือถือ
kaosmos

2
AFAIK ไม่ได้เป็นเช่นเดียวกับร่างผ่านtext-stroke ไม่มีตัวเลือกในการทำให้โครงร่างปรากฏนอกข้อความซึ่งหมายความว่าโครงร่างมีเลือดออกเป็นข้อความทำให้บ่อยครั้งที่ดูน่ากลัวจริงๆ กล่าวอีกนัยหนึ่งไม่ได้ใช้แทนโครงร่างtext-shadowtext-stroketext-stroketext-shadow
gman

90

ง่าย! SVG เพื่อช่วยเหลือ

นี่เป็นวิธีที่ง่ายขึ้น:

svg{
  font: bold 70px Century Gothic, Arial;
  width: 100%;
  height: 120px;
}

text{
  fill: none;
  stroke: black;
  stroke-width:0.5px;
  // stroke-dasharray: 2,2;
  stroke-linejoin: round;
  animation: 2s pulsate infinite;
}

@keyframes pulsate {
  50%{ stroke-width:4px; }
}
<svg viewBox="0 0 450 50">
  <text y="40">Scalable Title</text>
</svg>

นี่คืออีกสาธิตซับซ้อน


6
นี่เป็นโซลูชันที่ยอดเยี่ยมและไม่มีปัญหาด้านประสิทธิภาพที่เกี่ยวข้องกับ text-shadow ความแตกต่างของประสิทธิภาพระหว่างวิธีการนี้และการซ้อนข้อความหลายเงานั้นมีขนาดใหญ่มากสำหรับแอปพลิเคชันของฉันโดยเฉพาะ (IE 10 บนหน้าจอขนาดใหญ่แสดง)
djskinner

3
สิ่งนี้ให้ผลที่ดีกว่าฉันมากกับเงาข้อความเพราะฉันต้องการเส้นหนา ขอบคุณ!
Andrea

2
นั่นคือเพื่อนทองคำบริสุทธิ์ !! วิธีการที่เป็นมืออาชีพและมีทักษะมากสมบูรณ์แบบตอบคำถาม! วิธีแก้ปัญหานี้อยู่เหนือ W3 Council หรือ Google หรืออะไรก็ตามขอแสดงความยินดี!
Heitor

วิธีนี้จะเหมาะสำหรับฉันเช่นกันถ้าฉันไม่ได้เพิ่มจังหวะใน textarea :(
Brandito

36

คุณสามารถลองซ้อนเงาที่มีหลายภาพซ้อนกันได้เพื่อให้เงาดูเหมือนจังหวะ

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

ฉันพูดถึงมันในกรณีที่มีคนสนใจถึงแม้ว่าฉันจะไม่เรียกมันว่าเป็นทางออกเพราะมันล้มเหลวในหลายวิธี:

  • มันไม่ทำงานใน IE แบบเก่า
  • มันแสดงผลแตกต่างกันมากในทุกเบราว์เซอร์
  • การใช้เงาจำนวนมากนั้นหนักมากในการประมวลผล:

1
นี่เป็นแนวคิดที่เรียบง่ายและโหดร้ายจริงๆ!

1
ขอบคุณปัญหานี้เป็นผลการดำเนินงาน แต่ใช้กับการดูแล :)
brohr

1
มันยอดเยี่ยมมาก ชั้นเงาพิเศษเพิ่มความลึกให้กับมันจริงๆและใช้งานได้ใน IE11, FF36 และ Chrome 41
RockiesMagicNumber

17

ฉันกำลังมองหาวิธีแก้ปัญหาข้อความข้ามเบราว์เซอร์ที่ทำงานเมื่อวางซ้อนบนภาพพื้นหลัง คิดว่าฉันมีทางออกสำหรับสิ่งนี้ที่ไม่เกี่ยวข้องกับการเพิ่มราคาพิเศษ js และทำงานใน IE7-9 (ฉันยังไม่ได้ทดสอบ 6) และไม่ทำให้เกิดปัญหานามแฝง

นี่เป็นการรวมกันของการใช้ CSS3 text-shadow ซึ่งมีการสนับสนุนที่ดียกเว้น IE ( http://caniuse.com/#search=text-shadow ) จากนั้นใช้ตัวกรองสำหรับ IE ร่วมกัน การสนับสนุนจังหวะข้อความ CSS3 ไม่ดีในขณะนี้

ตัวกรอง IE

ตัวกรองเรืองแสง ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) ดูแย่มากดังนั้นฉันจึงไม่ได้ใช้มัน

คำตอบของ David Hewittเกี่ยวข้องกับการเพิ่มตัวกรอง dropshadow ในทิศทางต่างๆ 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;
}

สิ่งนี้ยังใช้งานได้ใน IE รุ่นเก่า:filter: glow(color=white,strength=1);
mch

16

เพียงเพิ่มคำตอบนี้ "Stroking" ข้อความไม่เหมือนกับ "เค้าร่าง"

เค้าร่างดูดี ลูบดูน่ากลัว

โซลูชัน SVG ที่ปรากฏในที่อื่นมีปัญหาเดียวกัน คุณต้องการเค้าโครงคุณต้องใส่ข้อความสองครั้ง เมื่อลูบและอีกครั้งไม่ได้ลูบ

การขีดไม่ใช่การสรุป

body {
  font-family: sans-serif;
  margin: 20px;
}

.stroked {
  color: white;
  -webkit-text-stroke: 1px black;
}

.thickStroked {
  color: white;
  -webkit-text-stroke: 10px black;
}

.outlined {
  color: white;
  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;
}

.thickOutlined {
  color: white;
text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000
}

svg {
  font-size: 40px;
  font-weight: bold;
  width: 450px;
  height: 70px;
  fill: white;
}

.svgStroke {
  fill: white;
  stroke: black;
  stroke-width: 20px;
  stroke-linejoin: round;
}
<h1 class="stroked">Properly stroked!</h1>
<h1 class="outlined">Properly outlined!</h1>

<h1 class="thickStroked">Thickly stroked!</h1>
<h1 class="thickOutlined">Thickly outlined!</h1>

<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text>
</svg>
<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text>
  <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text>
</svg>

PS: ฉันชอบที่จะรู้วิธีที่จะทำให้ SVG เป็นขนาดที่ถูกต้องของข้อความใด ๆ ฉันรู้สึกว่ามันค่อนข้างซับซ้อนที่เกี่ยวข้องกับการสร้าง svg, ค้นหาด้วย javascript เพื่อรับส่วนขยายจากนั้นใช้ผลลัพธ์ หากมีวิธีที่ไม่ใช่ js ง่ายกว่าที่ฉันชอบที่จะรู้


1
ดีมากนี่คือวิธีการที่ถูกต้องเค้าร่างไม่ลูบ ทำงานได้อย่างสวยงามและเรียบร้อยและง่ายต่อสายตา
MitchellK

7

ฉันได้ผลลัพธ์ที่ดีกว่าด้วย 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;
}

ฉันต้องการเงาที่ใหญ่กว่าและต้องเพิ่มสองบรรทัดพิเศษ .... 3px 0px 0 # 343a7e, -3px 0px 0 # 343a7e
Jayden Lawson


6

มิกซ์อินสำหรับ SASS นี้จะให้ผลลัพธ์ที่ราบรื่นโดยใช้ 8 แกน:

@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;
}

และ 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;

4

การทำงานกับจังหวะที่หนาขึ้นจะทำให้ยุ่งหน่อยถ้าคุณมีความสุขกับการลองใช้มิกซ์อินนี้ไม่สมบูรณ์แบบและขึ้นอยู่กับน้ำหนักของสโตรกมันจะสร้าง 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;
}

1
มิกซ์อินนี้ใช้งานไม่ได้สำหรับฉัน แต่อันนี้ใช้งานได้: gist.github.com/nathggns/2984123
akirk

0

ข้อความหลายเงา ..
สิ่งนี้:

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/


0

ตัวสร้างเงาข้อความ

มีคำตอบที่ดีมากมายที่นี่ มันจะปรากฏเงาข้อความน่าจะเป็นวิธีที่น่าเชื่อถือที่สุดในการทำเช่นนี้ ฉันจะไม่ลงรายละเอียดเกี่ยวกับวิธีการทำสิ่งนี้กับ text-shadow เนื่องจากมีคนอื่นทำมาแล้ว แต่แนวคิดพื้นฐานคือคุณสร้างเงาข้อความหลาย ๆ รอบองค์ประกอบข้อความ โครงร่างข้อความที่ใหญ่ขึ้นจะมีเงาข้อความที่คุณต้องการมากขึ้น

คำตอบทั้งหมดที่ส่งมา (ขณะที่โพสต์นี้) ให้บริการโซลูชั่นแบบคงที่สำหรับเงาข้อความ ฉันใช้แนวทางที่แตกต่างและเขียนJSFiddle นี้ที่ยอมรับสีโครงร่างความเบลอและความกว้างเป็นอินพุตและสร้างคุณสมบัติเงาเงาข้อความที่เหมาะสมสำหรับองค์ประกอบของคุณ เพียงกรอกข้อมูลในช่องว่างตรวจสอบตัวอย่างและคลิกเพื่อคัดลอก css และวางลงในสไตล์ชีทของคุณ


ภาคผนวกที่ไม่จำเป็น

เห็นได้ชัดว่าคำตอบที่มีลิงก์ไปยัง JSFiddle ไม่สามารถโพสต์ได้หากไม่มีรหัส คุณสามารถละเว้นภาคผนวกนี้ได้อย่างสมบูรณ์หากคุณต้องการ นี่คือ JavaScript จากซอของฉันที่สร้างคุณสมบัติเงาข้อความ โปรดทราบว่าคุณไม่จำเป็นต้องใช้รหัสนี้ในงานของคุณ:

function computeStyle() {
    var width = document.querySelector('#outline-width').value;
  width = (width === '') ? 0 : Number.parseFloat(width);
  var blur = document.querySelector('#outline-blur').value;
  blur = (blur === '') ? 0 : Number.parseFloat(blur);
  var color = document.querySelector('#outline-color').value;
  if (width < 1 || color === '') {
    document.querySelector('.css-property').innerText = '';
    return;
  }
    var style = 'text-shadow: ';
  var indent = false;
    for (var i = -1 * width; i <= width; ++i) {
    for (var j = -1 * width; j <= width; ++j) {
        if (! (i === 0 && j === 0 && blur === 0)) {
        var indentation = (indent) ? '\u00a0\u00a0\u00a0\u00a0' : '';
            style += indentation + i + "px " + j + "px " + blur + "px " + color + ',\n';
        indent = true;
      }
    }
  }
  style = style.substring(0, style.length - 2) + '\n;';
  document.querySelector('.css-property').innerText = style;

  var exampleBackground = document.querySelector('#example-bg');
  var exampleText = document.querySelector('#example-text');
  exampleBackground.style.backgroundColor = getOppositeColor(color);
  exampleText.style.color = getOppositeColor(color);
  var textShadow = style.replace(/text-shadow: /, '').replace(/\n/g, '').replace(/.$/, '').replace(/\u00a0\u00a0\u00a0\u00a0/g, '');
  exampleText.style.textShadow = textShadow;
}

-2

ฉันมีปัญหานี้เช่นกันและtext-shadowไม่มีตัวเลือกเพราะมุมจะดูไม่ดี (เว้นแต่ฉันจะมีเงาจำนวนมาก) และฉันไม่ต้องการความพร่ามัวดังนั้นตัวเลือกอื่น ๆ ของฉันคือทำดังนี้ 2 divs และสำหรับ div พื้นหลังให้ใส่-webkit-text-strokeลงไปซึ่งจะช่วยให้โครงร่างขนาดใหญ่เท่าที่คุณต้องการ

div {
  font-size: 200px;
  position: absolute;
  white-space: nowrap;
}

.front {
 color: blue;
}

.outline {
  -webkit-text-stroke: 30px red;
  user-select: none;
}
<div class="outline">
 outline text
</div>

<div class="front">
 outline text
</div>  

ใช้นี้ผมก็สามารถที่จะประสบความสำเร็จออกมาสายเพราะstroke-widthวิธีการที่ไม่ได้เป็นตัวเลือกถ้าคุณต้องการให้ข้อความของคุณยังคงชัดเจนกับร่างที่มีขนาดใหญ่มาก (เพราะมีstroke-widthโครงร่างจะเริ่มต้นภายในตัวอักษรซึ่งจะทำให้มันไม่ชัดเจนเมื่อความกว้าง มีขนาดใหญ่กว่าตัวอักษร

หมายเหตุ: เหตุผลที่ฉันต้องการโครงร่างอ้วนอย่างนั้นก็เพราะฉันเลียนแบบป้ายชื่อถนนใน "แผนที่ Google" และฉันต้องการรัศมีสีขาวอ้วนรอบข้อความ วิธีนี้ใช้ได้ผลดีสำหรับฉัน

นี่คือซอแสดงวิธีแก้ปัญหานี้

ป้อนคำอธิบายรูปภาพที่นี่


-15

นี่คือไฟล์ CSS หวังว่าคุณจะได้รับสิ่งที่คุณต้องการ

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

9
โปรดอธิบายรายละเอียดเกี่ยวกับโซลูชันของคุณ แม้ว่ามันจะใช้งานได้เราก็ยังไม่รู้ว่าจะใช้ยังไง
Patrick Hofman

3
ฉันหวังว่าโซลูชันที่เหมาะสมไม่จำเป็นต้องใช้ css 200 บรรทัด
dardub

2
คำตอบนี้ไม่สมเหตุสมผลเลย
superluminary
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.