모든 새로운 CSS3 테두리가 계속 진행되면서 ( -webkit
, …) 글꼴에 테두리를 추가 할 수 있습니까? (파란색 트위터 로고 주위의 흰색 테두리처럼). 그렇지 않다면 CSS / XHTML에서 이것을 달성 할 정도로 못생긴 해킹이 있습니까? 아니면 여전히 Photoshop을 실행해야합니까?
답변
-webkit 접두어 뒤에있는 일부 브라우저 에서 지원되는 text-stroke 라는 실험용 CSS 속성이 있습니다 .
h1 {
-webkit-text-stroke: 2px black; /* width and color */
font-family: sans; color: yellow;
}
<h1>Hello World</h1>
또 다른 가능한 트릭은 속성을 사용하여 모든 방향으로 한 픽셀 씩 네 개의 그림자를 사용하는 것입니다 text-shadow
.
h1 {
/* 1 pixel black shadow to left, top, right and bottom */
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-family: sans; color: yellow;
}
<h1>Hello World</h1>
그러나 1 픽셀 이상의 두께에서는 흐려질 것입니다.
답변
최신 정보
스트로크를 생성하는 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에서만 작동합니다.
답변
내가 사용하는 것은 다음과 같습니다.
.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 답변을 기반으로 함)