CSS에서 테두리 선 스타일을 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 테두리 선 스타일을 설정하는 방법

青灯夜游

풀어 주다： 2023-01-05 16:13:03

원래의

13124명이 탐색했습니다.

방법: 1. "점선" 점선, "실선" 및 "이중" 이중선과 같은 다양한 속성 값을 통해 다양한 테두리 선 스타일을 설정하려면 border-style 속성을 사용하세요. 2. border-image 속성을 사용하세요. , 테두리에 다양한 배경 이미지를 추가하여 다양한 테두리 선 스타일을 설정합니다.

CSS에서 테두리 선 스타일을 설정하는 방법

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

방법 1: 테두리 스타일 속성 사용

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	은 테두리 스타일이 상위 요소에서 상속되어야 함을 지정합니다.

예:

<!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>

로그인 후 복사

렌더링:

CSS에서 테두리 선 스타일을 설정하는 방법

방법 2: 테두리 이미지 속성

border-image 속성을 사용하여 테두리에 배경 이미지를 추가합니다

예:

이미지 사용 표시된 90px×90px 이미지는 테두리의 배경 이미지로 사용됩니다.

CSS에서 테두리 선 스타일을 설정하는 방법

코드 예:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:210px;
            height:150px;
            border:30px solid gray;
            border-image:url(img/border.png) 30 repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

로그인 후 복사

브라우저 미리보기는 아래와 같습니다.

CSS에서 테두리 선 스타일을 설정하는 방법