테스트 사이트 - 개발 중인 베타 버전입니다
SIR

CSS Border Properties

컴프
프로필 보기이 회원 글보기
 · 8년 전 · 2609

CSS Border Properties

CSS 테두리 속성을 사용하면 요소 테두리의 스타일, 너비 및 색상을 지정할 수 있습니다.

 

 

Border Style

border-style 속성은 어떤 종류의 테두리를 표시할지 지정합니다.

 

 

허용되는 값은 다음과 같습니다.

dotted - 점선 테두리를 정의합니다.

dashed - 점선 테두리를 정의합니다.

solid - 단색 테두리를 정의합니다.

double - 이중 경계를 정의합니다.

groove - 3D 그루브 경계를 정의합니다. 효과는 테두리 색 값에 따라 다릅니다.

ridge - 3D 융기 테두리를 정의합니다. 효과는 테두리 색 값에 따라 다릅니다.

inset - 3D 삽입 테두리를 정의합니다. 효과는 테두리 색 값에 따라 다릅니다.

outset - 3D 시작 테두리를 정의합니다. 효과는 테두리 색 값에 따라 다릅니다.

none - 테두리 없음 정의

hidden - 숨겨진 테두리를 정의합니다.

 

Example

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;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

 


 

 

<!DOCTYPE html>

<html>

<head>

<style>

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;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

</style>

</head>

<body>

 

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

 

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="none">No border.</p>

<p class="hidden">A hidden border.</p>

<p class="mix">A mixed border.</p>

 

</body>

</html>


목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3199
CSS skewX () 메서드 , skewY () 메서드, skew () 메서드
3198
CSS scale () 메서드
3197
CSS rotate () 메서드
3196
CSS CSS3 2D변환 - translate() 메서드
3195
CSS CSS3 단어 속보
3194
CSS CSS3 워드 래핑
3192
CSS css 굵은 글씨 사용
3191
CSS css 원하는 글꼴 사용하기
3190
CSS CSS3 웹 폰트 - @ font-face 규칙
3189
CSS CSS3 텍스트 오버플로 세번째
3188
CSS CSS3 텍스트 오버플로 두번째
3187
CSS CSS3 상자 그림자 속성
3186
CSS CSS3 그림자 효과 다섯번째
3185
CSS CSS3 그림자 효과 네번째
3184
CSS CSS3 그림자 효과 세번째
3183
CSS CSS3 그림자 효과 두번째
3182
CSS CSS3 그림자 효과
3181
CSS CSS3 그라디언트 방사형 그라데이션 반복
3180
CSS CSS3 그라디언트 다른 크기의 키워드 사용
3179
CSS CSS3 그라디언트 모양 설정
3178
CSS CSS3 방사형 그라디언트 - 다른 간격의 색상 정지
3177
CSS CSS3 그라디언트 두번째
3176
CSS CSS3 그라디언트
3175
CSS CSS3 Colors
3174
CSS CSS3 background-clip 속성
3173
CSS CSS3 background-origin 속성
3172
CSS css3 전체 크기 배경 이미지
3171
CSS css3 여러 배경 이미지의 크기 정의
3170
CSS CSS3 배경 크기
3169
CSS CSS3 다중 배경
이전 다음
전체 목록