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

테두리 스타일 속성을 사용하는 방법

青灯夜游

풀어 주다： 2019-02-15 13:31:35

원래의

7365명이 탐색했습니다.

border-style 속성은 요소의 네 가지 테두리 스타일을 동시에 설정하거나 각 측면의 테두리 스타일을 개별적으로 설정하는 데 사용됩니다.

테두리 스타일 속성을 사용하는 방법

CSS 테두리 스타일 속성

기능: 요소의 모든 테두리 스타일을 설정하거나 각 측면의 테두리 스타일을 개별적으로 설정하는 데 사용됩니다. 예를 들어 1~4개의 값을 가질 수 있습니다.

p.one {border-style:dotted dashed solid double;}
p.two {border-style:dotted solid double;}
p.three {border-style:dotted solid;}
p.four {border-style:dotted;}

로그인 후 복사

Rendering:

테두리 스타일 속성을 사용하는 방법

설명: 테두리는 border-style 속성의 값이 없음이 아닌 경우에만 나타날 수 있습니다.

설정 가능한 속성 값:

none: 테두리를 정의하지 않습니다.

hidden: "없음"과 동일합니다. 테두리 충돌을 해결하기 위해 숨김이 사용되는 테이블에 적용되는 경우는 제외됩니다.

dotted: 점선 테두리를 정의합니다. 대부분의 브라우저에서는 실선으로 렌더링됩니다.

dashed: 점선을 정의합니다. 대부분의 브라우저에서는 실선으로 렌더링됩니다.

solid: 실선을 정의합니다.

double: 이중선을 정의합니다. 이중선의 너비는 border-width 값과 같습니다.

groove: 3D 홈 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다.

ridge: 3D 능선 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다.

삽입: 3D 삽입 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다.

outset: 3D 시작 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다.

inherit: 테두리 스타일이 상위 요소에서 상속되도록 지정합니다.

CSS 테두리 스타일 속성 사용 예

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>
<body>
<p class="dotted">dotted边框</p>
<p class="dashed">dashed边框</p>
<p class="solid">solid边框</p>
<p class="double">double边框</p>
<p class="groove">groove边框</p>
<p class="ridge">ridge边框</p>
<p class="inset">inset边框</p>
<p class="outset">outset边框</p>
</body>
</html>

로그인 후 복사

렌더링:

테두리 스타일 속성을 사용하는 방법