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-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 와 같은 스크립트 라이브러리를 사용하면 대부분의 브라우저에서 제대로 작동하는 데 도움이됩니다.
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
나는 텍스트 그림자를 곱하는 것에 기반한 그다지 솔루션을 좋아하지 않으며, 실제로 유연하지 않으며, 추가 할 방향이 8 인 2 픽셀 스트로크에 대해 작동 할 수 있지만 3 픽셀 스트로크 방향이 16이되는 식입니다. 관리하기 정말 불편하지 않습니다.
올바른 도구가 존재합니다. SVG입니다 <text>
.이 경우 브라우저의 지원 문제는 아무것도 없습니다. '텍스트 그림자 사용에도 자체 지원 문제 filter: progid:DXImageTransform
가 있기 때문에 사용할 수 있거나 IE <10이지만 종종 예상대로 작동하지 않습니다.
나에게 가장 좋은 해결책은 구형 브라우저의 경우 획이없는 텍스트로 대체 된 SVG로 남아 있습니다.
이러한 종류의 접근 방식은 3.04, Opera 8, IE 9 이후 거의 모든 버전의 Chrome 및 Firefox, Safari에서 작동합니다.
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: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */
참고 URL : https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text
'programing tip' 카테고리의 다른 글
Java에는 한때 Pair 클래스가 없었습니까? (0) | 2020.08.23 |
---|---|
상위 디렉터리를 나타내는 Maven2 속성 (0) | 2020.08.23 |
목록을 초기화하는 방법 (0) | 2020.08.23 |
선택한 행을 dataTable 또는 ui : repeat 내의 commandLink에 어떻게 전달할 수 있습니까? (0) | 2020.08.23 |
Go의 기존 유형에 새 메소드를 추가하는 방법은 무엇입니까? (0) | 2020.08.23 |