테두리 스타일 속성을 사용하는 방법
- 青灯夜游원래의
- 2019-02-15 13:31:357337검색
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>렌더링:
위 내용은 테두리 스타일 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!