css text border 만들기

1.  문제 설명

오늘은 회사에서 text에 border를 넣은 디자인을 받았습니다.

그래서 잘 안 써보던 text에 border를 넣는 방법을

찾아서 기록해 봅니다.

 

2.  HTML

<div style="width: 100%; max-width:1280px;margin:0 auto;text-align: center;">
	<h4>안녕하세요</h4>
</div>

<div style="width: 100%; max-width:1280px;margin:0 auto;text-align: center;">
	<h4 class="color1">안녕하세요</h4>
</div>

<div style="width: 100%; max-width:1280px;margin:0 auto;text-align: center;">
	<h4 class="color2">안녕하세요</h4>
</div>

 

3.  CSS

h4 {
    font-style: normal;
    font-weight: 400;
    font-size: 100px;
    line-height: 1;
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.8);
    color:transparent;
}    

h4.color1 {
    color:rgb(166, 255, 0);
}

h4.color2 {
    color:rgb(227, 20, 172);
}

 

4.  전체

안녕하세요

안녕하세요

안녕하세요