CSS-lettertyperand?

h1 {
    -webkit-text-stroke: 2px black; /* width and color */
    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Antwoord 2, autoriteit 15%

UPDATE

Hier is een SCSS-mix om de streek te genereren: http://codepen.io/pixelass/pen/gbGZYL

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke*-1;
  @for $i from $from through $stroke {
   @for $j from $from through $stroke {
      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
    }
  }
  @return $shadow;
}
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {Style}           - text-shadow
@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

JA oude vraag.. met geaccepteerde (en goede) antwoorden..

MAAR…In het geval iemand dit ooit nodig heeft en een hekel heeft aan het typen van code…

DIT is een 2px zwarte rand met CrossBrowser-ondersteuning (niet IE)
Ik had dit nodig voor @fontface-lettertypen, dus het moest schoner zijn dan eerder geziene antwoorden …
Ik neem elke kant pixelsgewijs om ervoor te zorgen dat er (bijna) geen gaten zijn voor “fuzzy” (handgetekende of soortgelijke) lettertypen.
Subpixels (0.5px) kunnen worden toegevoegd, maar ik heb het niet nodig.

Lange code voor alleen de grens??? …JA!!!

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

Antwoord 3, autoriteit 5%

Je zou misschien een tekststreek kunnen emulerenmet behulp van de css text-shadow(of -webkit-text-shadow/-moz-text-shadow) en een zeer lage vervaging:

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

Maar hoewel dit breder beschikbaar is dan de eigenschap -webkit-text-stroke, betwijfel ik of het beschikbaar is voor de meerderheid van uw gebruikers, maar dat hoeft geen probleem te zijn (sierlijke degradatie, en zo).

Antwoord 4, autoriteit 2%

Om meer te weten te komen over enkele antwoorden die -webkit-text-stroke hebben genoemd, is hier de code om het te laten werken:

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

Een diepgaand artikel over het gebruik van tekststreek is hieren een lijst met browsers die tekststreek ondersteunen is hier.

Antwoord 5, autoriteit 2%

Er lijkt een eigenschap ‘text-stroke’ te zijn, maar (althans voor mij) werkt deze alleen in Safari.

http://webkit.org/blog/85/introducing-text-stroke /

Antwoord 6

Dit is wat ik gebruik:

.text_with_1px_border
{
    text-shadow: 
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000;
}
.text_with_2px_border
{
    text-shadow: 
        /* first layer at 1px */
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000,
        /* second layer at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}

Antwoord 7

Sorry ik ben laat, maar spreek over text-shadow, ik dacht dat je dit voorbeeld ook leuk zou vinden (ik gebruik het vrij vaak als ik goede schaduwen nodig heb op tekst):

text-shadow:
    -2px   -2px lightblue,
    -2px -1.5px lightblue,
    -2px   -1px lightblue,
    -2px -0.5px lightblue,
    -2px    0px lightblue,
    -2px  0.5px lightblue,
    -2px    1px lightblue,
    -2px  1.5px lightblue,
    -2px    2px lightblue,
    -1.5px  2px lightblue,
    -1px    2px lightblue,
    -0.5px  2px lightblue,
    0px     2px lightblue,
    0.5px   2px lightblue,
    1px     2px lightblue,
    1.5px   2px lightblue,
    2px     2px lightblue,
    2px   1.5px lightblue,
    2px     1px lightblue,
    2px   0.5px lightblue,
    2px     0px lightblue,
    2px  -0.5px lightblue,
    2px    -1px lightblue,
    2px  -1.5px lightblue,
    2px    -2px lightblue,
    1.5px  -2px lightblue,
    1px    -2px lightblue,
    0.5px  -2px lightblue,
    0px    -2px lightblue,
    -0.5px -2px lightblue,
    -1px   -2px lightblue,
    -1.5px -2px lightblue;

Antwoord 8

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

Antwoord 9

Lettertype-teken met een minder mixin

Hier is een MINDER mixin om de slag te genereren: http://codepen.io/anon /pen/BNYGBy?editors=110

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
.stroke(@stroke, @color) {
  @maxi: @stroke + 1;
  .i-loop (@i) when (@i > 0) {
    @maxj: @stroke + 1;
    .j-loop (@j) when (@j > 0) {
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(1px) 0 @color;
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(1px) 0 @color;
      .j-loop(@j - 1);
    }
    .j-loop (0) {}
    .j-loop(@maxj);
    .i-loop(@i - 1);
  }
  .i-loop (0) {}
  .i-loop(@maxi);
  text-shadow+: 0 0 0 @color;
}

(het is gebaseerd op een pixelass-antwoord dat in plaats daarvan SCSS gebruikt)

Antwoord 10

Ik heb een vergelijking gemaakt van alle oplossingen die hier worden genoemd om een snel overzicht te krijgen:

<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>

https://codepen.io/Grienauer/pen/GRRdRJr

Antwoord 11

Ik heb ooit geprobeerd om die ronde hoeken en slagschaduwen te maken met css3. Later ontdekte ik dat het nog steeds slecht wordt ondersteund (Internet Explorer(s), natuurlijk!)

Uiteindelijk probeerde ik dat te doen in JS (HTML-canvas met IE Canvas), maar het heeft veel invloed op de prestaties (zelfs op mijn C2D-machine). Kortom, als je het effect echt nodig hebt, overweeg dan JS-bibliotheken (de meeste zouden op IE moeten kunnen draaien6) maar overdrijf het niet vanwege prestatieproblemen; als je nog steeds een alternatief nodig hebt… je zou SFiR kunnen gebruiken, dan PS it en SFiR it. CSS3 is nog niet klaar vandaag.