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
연습으로 자신을 테스트!
모든 CSS 개요 등록
| 재산 | 기술 |
|---|---|
| outline | 하나의 선언에서 모든 개요 속성을 설정합니다 |
| outline-color | 아웃 라인의 색상을 설정합니다 |
| outline-offset | 요소의 외형 에지 또는 경계 사이의 공간을 지정 |
| outline-style | 개요의 스타일을 설정합니다 |
| outline-width | 윤곽 폭을 설정 |