CSS로 div의 테두리 스타일을 설정하는 방법-CSS 튜토리얼-php.cn

CSS로 div의 테두리 스타일을 설정하는 방법

青灯夜游

풀어 주다： 2023-01-05 16:10:21

원래의

8933명이 탐색했습니다.

CSS에서는 border-style 속성을 사용하여 div의 테두리 스타일을 설정할 수 있습니다. div 요소에 "border-style: 속성 값"만 추가하면 됩니다. 테두리 스타일 속성의 일반적인 값은 점선, 점선, 실선 등입니다.

CSS로 div의 테두리 스타일을 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css는 div의 테두리 스타일을 설정합니다

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				margin: 10px 0;
			}
			
			div.dotted {
				border-style: dotted
			}
			
			div.dashed {
				border-style: dashed
			}
			
			div.solid {
				border-style: solid
			}
			
			div.double {
				border-style: double
			}
			
			div.groove {
				border-style: groove
			}
			
			div.ridge {
				border-style: ridge
			}
			
			div.inset {
				border-style: inset
			}
			
			div.outset {
				border-style: outset
			}
		</style>
	</head>

	<body>
		<div class="dotted">点状边框</div>

		<div class="dashed">虚线边框</div>

		<div class="solid">实线边框</div>

		<div class="double">双线边框</div>

		<div class="groove">3D 凹槽边框</div>

		<div class="ridge">3D 垄状边框</div>

		<div class="inset">3D inset 边框</div>

		<div class="outset">3D outset 边框</div>
	</body>

</html>

로그인 후 복사

Rendering:

CSS로 div의 테두리 스타일을 설정하는 방법

css 테두리 스타일 속성

border-style 속성은 요소의 모든 테두리 스타일을 설정하는 데 사용됩니다. 각 면을 개별적으로 테두리 스타일을 설정합니다.

속성 값:

값	설명
none	테두리를 정의하지 않습니다.
hidden	은 "없음"과 동일합니다. 테두리 충돌을 해결하기 위해 숨김이 사용되는 테이블에 적용되는 경우는 제외됩니다.
dotted	점선 테두리를 정의합니다. 대부분의 브라우저에서는 실선으로 렌더링됩니다.
dashed	은 점선을 정의합니다. 대부분의 브라우저에서는 실선으로 렌더링됩니다.
solid	은 실선을 정의합니다.
double	은 이중선을 정의합니다. 이중선의 너비는 border-width 값과 같습니다.
groove	3D 홈 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다.
ridge	3D 능선 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다.
inset	3D 삽입 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다.
outset	3D 시작 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다.
inherit	은 테두리 스타일이 상위 요소에서 상속되어야 함을 지정합니다.