최신 웹 개발 튜토리얼
 

CSS Outline


CSS 개요 등록

국경 밖 - 개요는 요소 주위에 그려진 라인입니다. 이 요소가 확인하는 데 사용할 수 있습니다 "stand out" .

하는 CSS outline 속성은 윤곽의 스타일, 색상 및 폭을 지정합니다.

이 요소는 얇은 검은 색 테두리와 10px 폭 녹색 이중 윤곽선이 있습니다.


CSS의 Outline

outline 요소가 있도록 (테두리 밖에서) 요소를 중심으로 그려지는 라인 "stand out" .

그러나, outline 속성 경계로부터 다른 경우 - outline 요소의 치수의 일부가 아니며; 소자의 전체 폭과 높이 윤곽의 폭에 의해 영향을받지 않는다.


Outline 스타일

outline-style 속성은 윤곽의 스타일을 지정합니다.

outline-style 속성은 다음 값 중 하나를 가질 수 있습니다 :

  • dotted - 점선 테두리를 정의
  • dashed - 점선 윤곽을 정의
  • solid - 고체 윤곽을 정의
  • double - 더블 윤곽을 정의
  • groove - 3 차원 홈 윤곽을 정의합니다. 효과는 윤곽 컬러 값에 의존
  • ridge - 3 차원 래치의 윤곽을 정의합니다. 효과는 윤곽 컬러 값에 의존
  • inset - 3 차원 삽입 개요를 정의합니다. 효과는 윤곽 컬러 값에 의존
  • outset - 3 차원 처음 윤곽을 정의합니다. 효과는 윤곽 컬러 값에 의존
  • none - 아니 윤곽을 정의합니다
  • hidden - 숨겨진 윤곽을 정의

다음 예제는 먼저 각 주위에 얇은 검은 색 테두리 설정 <p> 요소, 그것은 다른 표시 outline-style 값 :

p {
    border: 1px solid black;
    outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

결과:

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

»그것을 자신을 시도
노트참고 :하지 않는 한 아래에 설명 된 다른 CSS 개요 속성 중에 어떤 영향을주지 않습니다 outline-style 속성을 설정!

색상 개요

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

색을 설정할 수있다 :

  • 이름 - 같은 색 이름을 지정 "red"
  • RGB - 같은 RGB 값 지정 "rgb(255,0,0)"
  • 진수 -와 같은 16 진수 값 지정 "#ff0000"
  • 반전은 - (개요 컬러 배경에 관계없이 볼 수 보장) 색상 반전을 수행

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

결과:

A colored outline.

»그것을 자신을 시도

폭 개요

outline-width 속성은 윤곽의 폭을 지정합니다.

폭 (에 특정 크기로 설정 될 수있다 px, pt, cm, em 얇은 중간, 두께 : 등) 또는 세 개의 미리 정의 된 값 중 하나를 사용하여.

p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

결과:

A thick outline.

A thinner outline.

»그것을 자신을 시도

Outline - 약식 속성

코드를 단축하기 위해, 하나의 속성으로 모든 개별 윤곽선 속성을 지정하는 것도 가능하다.

outline 속성은 다음 각 윤곽 특성에 대한 약식 속성이다 :

  • outline-width
  • outline-style (필수)
  • outline-color

p {
    border: 1px solid black;
    outline: 5px dotted red;
}

결과:

An outline.

»그것을 자신을 시도

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3»


모든 CSS 개요 등록

재산 기술
outline 하나의 선언에서 모든 개요 속성을 설정합니다
outline-color 아웃 라인의 색상을 설정합니다
outline-offset 요소의 외형 에지 또는 경계 사이의 공간을 지정
outline-style 개요의 스타일을 설정합니다
outline-width 윤곽 폭을 설정