CSS 테두리와 윤곽선의 차이점 알아보기
- WBOY앞으로
- 2023-09-15 08:25:01669검색
CSS 테두리 속성은 요소의 테두리 속성을 정의하는 데 사용됩니다. 테두리 너비, 테두리 스타일 및 테두리 색상을 줄여서 표현한 것입니다. 각 측면의 테두리 스타일을 지정하고 테두리 반경을 지정할 수 있습니다.
반면에 CSS 윤곽선은 공간을 차지하지 않으며 설정된 경우 테두리 주위에 나타납니다. 오프셋을 지원합니다. 또한 개별 가장자리에 윤곽선이 있어야 하는지 여부를 지정할 수 없습니다.
기본적으로 테두리와 윤곽선은 표시되지 않습니다.
Syntax
CSS 테두리 및 개요 속성 구문은 다음과 같습니다. -
Selector {
border: /*value*/
outline: /*value*/
}예제
다음 예는 CSS 테두리 및 개요 속성을 보여줍니다. -
라이브 데모
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 15px;
padding: 20px;
width: 35%;
border: thin solid green;
outline-width: 5px;
outline-style: ridge;
outline-color: fuchsia;
border-radius: 50px;
}
</style>
</head>
<body>
<h2>Example</h2>
<div>This is it!</div>
</body>
</html>Output
이 결과는 다음과 같습니다.
Example
라이브 데모
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 40px;
padding: 12px;
width: 30%;
border: thick dashed green;
outline: 5px inset;
outline-color: fuchsia;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text surrounded by border and outline.</p>
</body>
</html>Output
이 결과는 다음과 같습니다.
위 내용은 CSS 테두리와 윤곽선의 차이점 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제