CSS를 사용하여 여러 색상 테두리 만들기

게시 됨: 2022-02-16

CSS 테두리 속성에는 단색, 파선, 점 등과 같은 선택 항목과 같은 몇 가지 사용자 지정 옵션이 있습니다. 그러나 테두리 색상의 경우 한 면당 단색만 가질 수 있습니다. 그러나 생각하지 못한 몇 가지 속성을 더 사용하여 다색 선을 만드는 또 다른 방법이 있습니다. 살펴보겠습니다.

단단한

솔리드 보어

대시

대시보드

점이 찍힌

점선

멀티 컬러 테두리

여러 가지 빛깔의 1

멀티컬러보2

위와 같은 다중 색상 테두리를 얻으려면 position 속성과 ::after 선택기를 색상 그라디언트와 함께 사용합니다. 먼저 HTML <div> 클래스를 사용하여 헤더 영역을 만든 다음 CSS로 스타일을 지정하여 이 영역과 아래 내용을 구분하는 다중 색상 테두리를 갖게 됩니다.

HTML 만들기:

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>
팝업에서 열기
 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

이제 CSS로 약간 스타일을 지정해 보겠습니다.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }
팝업에서 열기
 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

이제 다음과 같이 보일 것입니다.

CSS를 사용하여 여러 색상 테두리 만들기

이제 .ost-multi-header selector 에 ::after 를 추가할 수 있습니다. 하지만 그 전에 ::after 가 하는 일과 다중 색상 테두리에 대한 position 속성이 필요한 이유를 약간 설명하고 싶습니다. ::after 는 선택한 요소의 끝에서 content 속성에 있는 모든 것으로 의사 요소를 만듭니다. 우리의 경우 그 요소는 .ost-multi-header 입니다. 유서 깊은 "Hello World!"를 만들자! 설명하기 위한 예.

CSS에 다음을 추가하십시오.

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }
팝업에서 열기
 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

hwheaderbor

보시다시피 이제 "Hello World!"가 생겼습니다. 헤더 제목 아래에 있는 요소. 부모 요소인 .ost-multi-header 는 position 속성을 relative 로 가지고 있기 때문에 자식 요소에 absolute 위치를 지정할 수 있습니다. 이것은 우리가 부모 요소 내에서 원하는 위치로 ::after 로 생성한 새로운 의사 요소를 쉽게 이동할 수 있게 해줍니다. 맨 아래에 놓고 부모 요소 내에서 왼쪽에서 20px 이상 이동합니다. 부모 요소의 position 속성이 relative로 설정되어 있지 않은 경우 절대 위치 요소는 브라우저 뷰포트의 맨 아래에 있고 왼쪽으로 20px가 됩니다.

우리의 색 테두리는 어떻습니까? 우리는 그라디언트를 사용하여 다중 색상 테두리가 되도록 의사 요소의 배경 스타일을 지정할 것입니다. CSS 그라디언트는 선형 또는 방사형일 수 있습니다. 우리의 경계에는 linear-gradient 를 사용할 것입니다. 간단히 말해서, 이것은 우리가 찾는 경계를 제공할 것입니다.

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }
팝업에서 열기
 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

하지만, 차근차근 천천히 가자. 첫째, content 속성은 비어 있어도 여전히 존재합니다. 이는 content 속성이 없으면 의사 요소가 생성되지 않기 때문입니다. 그래서 필요합니다. 의사 요소의 높이, 즉 경계 높이를 설정해야 합니다. left 및 right 속성을 모두 0으로 설정하는 이유는 무엇입니까? 너비를 설정하지 않으면 의사 요소가 부모 요소 내부의 100% 너비로 늘어납니다. 많은 것처럼 보일 수 있지만 linear-gradient 설정은 색상이 왼쪽에서 "오른쪽으로" 흐르도록 지시하고 배경의 특정 비율에서 원하는 색상을 입력합니다.

비록 우리가 하고 있는 모든 것이 특정 비율로 어떤 색상을 선택하는 것뿐이지만 많은 노력이 필요합니다. 운 좋게도 색상 그라디언트에 엄청난 도움이 되는 무료 온라인 리소스가 있습니다. ColorZilla 의 Ultimate CSS Gradient Generator 는 구형 브라우저를 지원하기 위한 여러 그라디언트 속성을 포함하는 훌륭한 도구입니다.

도구에 이미 설정 그라디언트가 있으므로 이 링크를 사용하여 이 자습서에서 사용된 정확한 설정을 볼 수 있습니다. https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,2월123+66,2184cd+66,2184cd+100. 다음과 같이 표시되어야 합니다.

CSS를 사용하여 여러 색상 테두리 만들기

이 사이트에는 많은 설정이 있지만 테두리에 사용할 모양을 만드는 데 필요한 설정에 집중하겠습니다. 분해해 보겠습니다.

CSS를 사용하여 여러 색상 테두리 만들기

  1. 사전 설정 - 훌륭한 출발점이 될 수 있습니다!
  2. 슬라이더 바 - 여기에서 색상을 추가, 제거 및 편집할 수 있습니다.
  3. 중지 - 이 섹션에서는 각 색상의 불투명도 및 위치에 대한 설정을 변경할 수 있습니다. 위 슬라이더의 색상 상자를 클릭하기만 하면 이 섹션에서 제어할 색상 상자를 변경할 수 있습니다.
  4. 미리보기 - 여기에서 변경 결과를 즉시 볼 수 있습니다.
  5. 방향 및 크기 - 수평, 수직, 대각선 또는 방사형에서 변경할 수 있습니다. 그리고 그라디언트의 크기를 설정합니다.
  6. CSS 코드 - 영구 링크가 있는 생성된 코드이므로 언제든지 돌아가서 쉽게 그라디언트를 편집할 수 있습니다.

우리는 우리의 경우 희미한 그라디언트를 찾는 것이 아니라 두 색상 사이의 단단한 평면 전환을 찾고 있었기 때문에 우리가 해야 할 일은 두 색상을 원하는 위치에 서로 쌓는 것뿐입니다. 이 예에서는 색상을 각각 33%와 66%로 쌓았습니다.

CSS를 사용하여 여러 색상 테두리 만들기

미리보기에 표시되는 내용이 코드에서 생성되는 것임을 알고 설정을 자유롭게 사용하십시오. 원하는 모양으로 설정되면 코드 상자의 오른쪽 하단에 있는 "복사" 버튼을 사용할 수 있습니다.

대학원

링크에 있는 대로 코드를 복사했다면 최종 CSS는 다음과 같을 것입니다.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }
팝업에서 열기
 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

그리고 해당 CSS는 완전히 반응하는 다음과 같은 여러 색상의 밑줄을 생성합니다.

CSS를 사용하여 여러 색상 테두리 만들기

우리는 거기에 갈! .ost-multi-header 하단에 6px 패딩을 추가할 필요가 없었지만 absolute 위치의 자식은 더 이상 부모 요소의 높이에 영향을 주지 않습니다. 상위 요소에 있는 콘텐츠 위에 떠 있도록 하거나, 가려지기를 원하지 않는 콘텐츠를 덮지 않도록 padding 을 추가할 수 있습니다.

다음은 누구나 걱정 없이 편집하고 배울 수 있도록 CodePen에서 다시 만든 이 연습에 대한 링크입니다.

마지막으로, 일부 구형 브라우저는 단일 콜론 :after 선택기만 지원하며 현대 표준 double ::after 는 지원하지 않습니다. 안전하려면 단일 콜론을 사용할 수 있습니다. 현재로서는 최신 브라우저에서도 작동합니다.