CSS 개요 스타일 속성을 사용하는 방법-CSS 튜토리얼-php.cn

CSS 개요 스타일 속성을 사용하는 방법

青灯夜游

풀어 주다： 2019-05-28 10:20:52

원래의

2195명이 탐색했습니다.

윤곽선은 테두리 가장자리 바로 바깥에 있는 요소 주위에 그려진 선입니다. 개요 스타일 속성은 요소의 전체 개요 스타일을 설정하는 데 사용됩니다. 이 속성의 값은 none로 설정할 수 없습니다. 그렇지 않으면 개요가 표시되지 않습니다.

CSS 개요 스타일 속성을 사용하는 방법

CSS 개요 스타일 속성을 사용하는 방법은 무엇입니까?

outline-style 속성은 요소의 전체 윤곽선 스타일을 지정하는 데 사용됩니다. 스타일은 없음일 수 없습니다. 그렇지 않으면 윤곽선이 나타나지 않습니다.

구문: 

outline-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit;

로그인 후 복사

속성 값:

● 없음: 기본값. 개요를 정의하지 마십시오.

●　dotted: 점선 윤곽선을 정의합니다.

●　dashed: 점선 윤곽선을 정의합니다.

●　solid: 실선의 윤곽을 정의합니다.

●　double: 이중선 윤곽선을 정의합니다. 이중선의 너비는 윤곽선 너비 값과 같습니다.

●groove: 3D 홈 프로파일을 정의합니다. 이 효과는 윤곽선 색상 값에 따라 달라집니다.

●　ridge: 3D 홈 프로파일을 정의합니다. 이 효과는 윤곽선 색상 값에 따라 달라집니다.

●　삽입: 3D 오목 모서리 윤곽선을 정의합니다. 이 효과는 윤곽선 색상 값에 따라 달라집니다.

● 아웃셋: 3D 볼록 가장자리 윤곽선을 정의합니다. 이 효과는 윤곽선 색상 값에 따라 달라집니다.

● 상속: 윤곽선 스타일 설정이 상위 요소에서 상속되도록 지정합니다.

참고: outline-style 속성은 항상 외곽선 색상 속성보다 먼저 선언되어야 합니다. 요소가 외곽선을 얻은 후에만 외곽선의 색상을 변경할 수 있기 때문입니다.

참고:

윤곽선은 요소를 둘러싸는 여백이지만 다른 테두리 속성에서 비롯됩니다.

윤곽선은 요소 크기의 일부가 아니므로 요소의 너비 및 높이 속성에는 윤곽선의 너비가 포함되지 않습니다. 윤곽선은 공간을 차지하지 않으며 반드시 직사각형일 필요는 없습니다.

css 개요 스타일 속성 예

<!DOCTYPE>
<html>

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p {
				border: 1px solid 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;
			}
		</style>
	</head>

	<body>

		<p class="dotted">点线轮廓</p>
		<p class="dashed">虚线轮廓</p>
		<p class="solid">实线轮廓</p>
		<p class="double">双线轮廓</p>
		<p class="groove">凹槽轮廓</p>
		<p class="ridge">垄状轮廓</p>
		<p class="inset">嵌入轮廓</p>
		<p class="outset">外凸轮廓</p>
		<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
	</body>

</html>

로그인 후 복사

렌더링:

CSS 개요 스타일 속성을 사용하는 방법