CSS 글꼴 테두리?

CSS 글꼴 테두리?

---

모든 새로운 CSS3 테두리가 계속 진행되면서 ( -webkit, ...) 글꼴에 테두리를 추가 할 수 있습니까? (파란색 트위터 로고 주위의 흰색 테두리처럼). 그렇지 않은 경우 CSS / XHTML에서이를 달성 할 정도로 못생긴 해킹이 있습니까? 아니면 여전히 Photoshop을 실행해야합니까?

---

정답은 다음과 같습니다.

h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

<h1>Hello World</h1>

이렇게하면 네면에서 같은 네 가지 그림자가 설정됩니다.

---

최신 정보

스트로크를 생성하는 SCSS 믹스 인은 다음과 같습니다. 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);
}

예, 그렇습니다

그러나 ... 누구든지 이것을 필요로하고 타이핑 코드를 싫어하는 경우 ...

이것은 IE가 아닌 CrossBrowser를 지원하는 2px 검은 색 테두리입니다. @ fontface 글꼴 에이 글꼴이 필요했기 때문에 이전에 본 답변보다 깨끗해야했습니다. 퍼지 "(한글 또는 이와 유사한) 글꼴. 하위 픽셀 (0.5px)을 추가 할 수는 있지만 필요하지 않습니다.

국경을위한 긴 코드 ??? ...예!!!

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;

---

CSS (또는 / )와 매우 낮은 흐림 효과를 사용하여 텍스트 스트로크를 에뮬레이션 할 수 있습니다 .text-shadow-webkit-text-shadow-moz-text-shadow

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

그러나 이것이 -webkit-text-stroke부동산 보다 더 광범위하게 사용 가능하지만 대부분의 사용자가 사용할 수는 있지만 문제가되지는 않을 것입니다.

---

-webkit-text-stroke를 언급 한 일부 답변에 대해 더 자세히 설명하기 위해 작동하는 코드는 다음과 같습니다.

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

텍스트 스트로크 사용에 대한 자세한 기사는 여기에 있으며 텍스트 스트로크를 지원하는 브라우저 목록은 여기에 있습니다 .

---

'text-stroke'속성이있는 것 같지만 (적어도 나에게는) Safari에서만 작동합니다.

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

---

내가 사용하는 것은 다음과 같습니다.

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

---

믹스 인이 적은 스트로크 글꼴 문자

스트로크를 생성하는 LESS 믹스 인은 다음과 같습니다. 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;
}

(대신 SCSS를 사용하는 pixelass 답변을 기반으로 함)

---

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

---

나는 한 번 그 둥근 모서리를 시도하고 css3로 그림자를 떨어 뜨 렸습니다. 나중에도 여전히 제대로 지원되지 않는다는 것을 알았습니다 (물론 Internet Explorer!)

JS (IE Canvas가있는 HTML 캔버스) 에서이 작업을 시도했지만 성능에 많은 영향을 미칩니다 (C2D 컴퓨터에서도). 간단히 말해, 실제로 효과가 필요한 경우 JS 라이브러리 (대부분의 라이브러리는 IE6에서 실행할 수 있어야 함)를 고려하지만 성능 문제로 인해 과도하게 수행하지 마십시오. 그래도 대안이 필요한 경우 SFiR을 사용한 다음 PS 및 SFiR을 사용할 수 있습니다. CSS3는 오늘 준비되지 않았습니다.

참고 URL : https://stackoverflow.com/questions/2570972/css-font-border