CSS의 테두리 속성을 사용하면 웹 디자이너가 요소 테두리의 스타일, 너비 및 색상을 지정할 수 있습니다.
CSS에서 그라디언트를 사용하면 디자이너가 둘 이상의 색상 사이에 부드러운 전환을 적용할 수 있습니다. 그라디언트를 사용하여 웹 페이지의 요소에 음영, 색상 혼합 및 질감과 같은 시각적 효과를 만들 수 있습니다.
테두리 그라데이션은 개발자가 요소의 테두리에 그라데이션을 적용할 수 있는 CSS 속성입니다.
그라데이션 테두리는 테두리의 색상이 한 색상에서 다른 색상으로 변경되는 시각적 효과를 만듭니다.
목차
그라데이션 테두리를 사용하는 이유는 무엇입니까?
보더 그래디언트는 CSS3에 도입된 다양한 스타일링 기능 중 하나였습니다. 다음은 다음 웹 앱에 이를 포함해야 하는 몇 가지 이유입니다.
- 테두리 그라데이션은 유연합니다. 그라데이션 테두리를 사용하여 복잡하고 계층화된 효과를 만들 수 있습니다. 이는 단단한 단색 테두리와 다릅니다. 따라서 그라데이션 테두리는 미묘한 시각적 디자인이 필요한 복잡한 레이아웃이나 모양을 처리할 때 유용합니다.
- 시각적 매력 만들기: 그라데이션 테두리 효과를 사용하여 디자인에 시선을 사로잡는 시각 효과를 추가할 수 있습니다. 예를 들어 대담한 색상 대비를 사용하여 웹 페이지의 특정 요소에 주의를 끌 수 있습니다.
- 원활한 통합 제공: 그라데이션 테두리를 사용하면 테두리를 요소의 배경에 원활하게 통합할 수 있습니다. 이러한 접근 방식은 웹 페이지에 견고하고 응집력 있는 모양을 제공하여 신중한 디자인을 보여줍니다.
CSS에서 테두리 그라데이션을 추가하는 방법
테두리 그라데이션을 추가하는 방법을 설명하기 전에 HTML 요소에 테두리를 추가하는 방법을 설명할 수 있습니다.
이 코드를 사용할 수 있습니다.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> <title>Document</title> </head> <body> <div class="box contains-border"> How to add a Border illustrated!!! </div> </body> </html>
CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}
렌더링된 페이지는 다음과 같이 나타납니다.
위의 코드는 테두리가 있지만 공백으로 인해 눈에 그리 매력적이지 않습니다. 우리는 div 주위에 5px 단색 Rebecca 자주색 테두리만 있습니다.
테두리 그래디언트를 사용하여 테두리를 매력적으로 만들 수 있습니다. 테두리 그래디언트를 추가하는 방법에는 여러 가지가 있습니다. 주요 내용은 다음과 같습니다.
그라데이션 테두리 사용(선형 그라데이션, 방사형 그라데이션, 원추형 그라데이션)
세 가지 방법으로 그라데이션 테두리를 사용하는 방법을 설명합니다.
선형 그라데이션
선형 그래디언트는 두 개 이상의 색상을 직선으로 매끄럽게 전환합니다. 다음 코드를 사용하여 시연할 수 있습니다.
HTML
<!DOCTYPE html> <html> <head> <title>Linear Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box linear-gradient"> Linear Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.linear-gradient {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}
테두리 스타일을 실선으로 지정했습니다. 즉, 상자 주변의 테두리가 실선입니다. 코드의 테두리 너비는 10px입니다.
선형 그래디언트는 rgb(143, 55, 0)”로 시작하여 “rgb(66, 228, 250)”로 끝납니다. 또한 45도 각도를 지정했습니다. 테두리 이미지 슬라이스의 너비는 “1”로 설정됩니다.
렌더링된 페이지는 다음과 같이 나타납니다.
방사형 그라데이션
방사형 그래디언트는 사용자가 웹 페이지 요소에서 한 색상에서 다른 색상으로 전환할 수 있도록 중심점에서 방사되는 원형 그래디언트를 만듭니다.
다음 코드를 사용하여 방사형 그래디언트를 추가하는 방법을 설명할 수 있습니다.
HTML
<!DOCTYPE html> <html> <head> <title>Radial Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box radial-gradient"> Radial Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.radial-gradient {
border-style: solid;
border-width: 5px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}
요소의 테두리 스타일을 단색으로 설정했습니다. 또한 테두리에 테두리 너비를 5px로 지정했습니다.
방사형 그라데이션은 짙은 녹색 RGB(0,143,104)로 시작하여 rgb(250,224,66)로 표시되는 밝은 노란색으로 끝납니다.
코드 끝의 ‘1’은 border-image-repeat 속성을 나타냅니다. 이 값은 브라우저가 요소의 테두리 주변에서 테두리 이미지를 한 번만 반복하도록 지시합니다.
렌더링된 페이지는 다음과 같이 나타납니다.
원뿔 기울기
원추형 그라데이션은 원형 색상 전환을 만듭니다. 이 효과에서는 전환이 중심점에서 시작된 다음 바깥쪽으로 퍼져 원형 효과를 형성합니다.
HTML
<!DOCTYPE html> <html> <head> <title>Conic Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box conic-gradient"> Conic Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.conic-gradient {
border-style: solid;
border-width: 7.5px;
border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}
이 코드에서는 테두리 스타일을 단색으로 설정하고 테두리 너비를 7.5px로 지정합니다. border-image 속성은 테두리 그라데이션을 설정합니다. 빨간색에서 시작하여 rgb(255, 0, 38)로 끝나는 7가지 색상이 있습니다.
코드 끝에 있는 숫자 ‘1’은 1픽셀의 테두리 너비를 제공합니다.
렌더링된 페이지는 다음과 같이 나타납니다.
테두리 이미지 사용
테두리 이미지는 HTML 요소의 표준 실선 테두리를 대체합니다. 테두리 그라데이션을 만들기 위해 색상을 결합하는 대신 테두리 이미지를 사용하여 복잡한 디자인을 만듭니다.
HTML
<!DOCTYPE html> <html> <head> <title>Border Images Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box border-images"> Border Images Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.border-images {
border-style: solid;
border-width: 15px;
border-image-source: url(/images/elephant-2910293_1920.jpg);
border-image-slice: 60 30;
}
border-width 속성에 너비를 15px로 지정하고 border-style을 solid로 설정했습니다.
border-image-slice는 테두리 상자의 너비와 높이를 각각 60%와 30%로 설정합니다.
렌더링된 페이지는 다음과 같이 나타납니다.
속기 속성 사용
속기 속성을 사용하면 개발자가 한 줄의 코드를 사용하여 여러 개별 CSS 속성의 스타일을 지정할 수 있습니다. 이 경우 border-image를 사용하여 border-image-source 및 border-image-slice를 지정합니다.
HTML
<!DOCTYPE html> <html> <head> <title>Shorthand Property Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box shorthand"> Shorthand Property Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.shorthand {
border-style: solid;
border-width: 15px;
border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}
렌더링된 페이지는 다음과 같이 나타납니다.
CSS 테두리 그라데이션 생성기
CSS 테두리 그래디언트 생성기는 개발자가 웹 페이지의 요소에 그래디언트 효과를 추가하는 데 도움이 됩니다. 이 생성기를 사용하면 설정을 조정할 수 있으므로 처음부터 모든 것을 만들 필요가 없습니다. 다음은 사용할 수 있는 도구 중 일부입니다.
#1. CSS 그라디언트 생성기 – 색상 변환
색상 변환을 사용하면 최대 5가지 색상으로 선형 또는 방사형 그래디언트 CSS 코드를 생성할 수 있습니다. 생성한 CSS 그래디언트 코드는 요소의 테두리 또는 배경 이미지로 사용할 수 있습니다.
이 생성기로 다음을 수행할 수 있습니다.
- 최대 5가지 색상을 선택하여 테두리 그라데이션에 사용합니다.
- 그라데이션 방향을 선택합니다. 이 도구에는 선형 및 방사형 그래디언트가 모두 있습니다.
- 색상 중지 기능을 사용하여 색상 전환이 발생하는 방식을 결정할 수 있습니다.
코드 실험 및 생성이 완료되면 웹사이트에서 코드를 복사하여 사용할 수 있습니다.
#2. CSS 테두리 그라데이션 생성기-사용하지 않는 CSS
Unused-CSS는 개발자가 의사 요소나 추가 요소를 생성하지 않고 블록 요소에 적용할 수 있는 그라데이션 테두리를 생성하는 데 도움이 됩니다.
다음을 수행할 수 있습니다.
- 다양한 그래디언트 유형 중에서 선택합니다. 이 도구로 작업할 때 방사형 및 선형 그래디언트 간에 쉽게 전환할 수 있습니다.
- 미리보기 탭. 이 도구를 사용하면 웹 페이지를 사용자 지정할 때 테두리 그래디언트가 웹 페이지에 어떻게 표시되는지 미리 볼 수 있습니다.
- 색상이 중지됩니다. 이 도구를 사용하면 다양한 색상에 대해 전환이 발생하는 방식을 쉽게 결정할 수 있습니다.
- 테두리 크기 사용자 정의. 이 도구를 사용하여 테두리 크기와 테두리 반경을 쉽게 사용자 지정할 수 있습니다.
생성된 코드가 만족스러우면 복사하여 프로젝트에 사용할 수 있습니다.
#삼. 그라데이션 테두리 생성기 – Amit Sheen
이 도구에는 8가지 배경 영역이 있어 개발자가 둥근 그라데이션 테두리 효과를 만들 수 있습니다.
다음을 달성할 수 있습니다.
- 그라데이션 애니메이션을 만듭니다. 이 도구를 사용하면 둘 이상의 색상 간에 전환되는 그라데이션 애니메이션을 생성할 수 있습니다.
- JavaScript 코드를 포함할 수 있습니다. 사용자 지정 가능한 요소에 JS 코드가 필요한 경우 언제든지 제어판에서 찾아서 사용자 지정할 수 있습니다.
- 실시간 미리보기. 코드를 사용자 지정할 때 코드의 변경 사항을 볼 수 있습니다.
테두리 그라디언트 효과를 원하는 대로 사용자 정의한 후 코드를 복사하여 붙여넣을 수 있습니다.
결론
웹 페이지를 디자인할 때 위의 방법 중 하나를 사용하여 요소에 그라데이션 테두리를 추가할 수 있습니다. 접근 방식의 선택은 선호도, 기술 수준 및 스타일링하려는 요소의 특성에 따라 달라질 수 있습니다.
동일한 웹 페이지의 다른 요소에 대해 다른 접근 방식을 사용할 수도 있습니다.
웹 페이지의 시각적 매력을 향상시키기 위해 CSS에서 이중 테두리를 만드는 방법을 확인하십시오.