CSS 경계선 색상

CSS 경계선 색상

outline-color 속성은 경계선 색상을 설정하는 데 사용됩니다.

다음과 같은 방법으로 색상을 설정할 수 있습니다:

  • 이름 - 색상 이름 지정, 예를 들어 "red"
  • HEX - 16진수 값 지정, 예를 들어 "#ff0000"
  • RGB - RGB 값 지정, 예를 들어 "rgb(255,0,0)"
  • HSL - HSL 값 지정, 예를 들어 "hsl(0, 100%, 50%)"
  • invert - 색상 반전 실행(어떤 색상 배경이든 경계선이 보이도록)

다음은 다양한 색상과 경계선 스타일의 예제를 보여줍니다. 주의하십시오, 이 요소는 경계선 내에 검은색의 얇은 경계선도 있습니다:

빨간색의 단일선 경계선.

파란색의 점선 경계선.

회색의 부드러운 경계선 테두리.

예제

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}
p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}
p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

직접 시도해보세요

HEX 값

또한 16진수 값(HEX)를 사용하여 경계선 색상을 지정할 수 있습니다:

예제

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* 빨간색 */
}

직접 시도해보세요

RGB 값

또는 RGB 값을 사용하여:

예제

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* 빨간색 */
}

직접 시도해보세요

HSL 값

HSL 값도 사용할 수 있습니다:

예제

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* 빨간색 */
}

직접 시도해보세요

우리의 CSS 색상 장에서 HEX, RGB, HSL 값에 대해 더 많은 지식을 배울 수 있습니다.

색상을 반전

다음 예제에서 outline-color: invert색상을 반전시키는 명령을 실행했습니다. 이렇게 하면 어떤 색상 배경이든 외곽선이 보이도록 할 수 있습니다:

색상을 반전한 실선 외곽선.

예제

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

직접 시도해보세요