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

CSS Border Properties

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

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>


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
3168
CSS CSS3 border-image Property
3167
CSS CSS3 border-radius - 각 모서리 지정
3166
CSS CSS3 border-radius 속성
3165
HTML HTML5 로컬 저장소
3164
HTML HTML5 드래그 앤 드롭
3163
HTML HTML5 Geolocation 사용자 위치 찾기
3162
HTML YouTube 동영상 ID
3161
HTML HTML 도우미 (플러그인)
3160
HTML HTML5 Audio on the Web(웹상의 오디오)
3159
HTML HTML5 비디오
3158
HTML HTML 멀티미디어 오디오 형식
3157
HTML HTML 멀티미디어
3156
기타 Google 아이콘
3155
기타 부트 스트랩 아이콘
3154
기타 아이콘을 추가하는 방법
3153
반응형 부트 스트랩 <blockquote>
3152
반응형 부트 스트랩 <abbr>
3151
반응형 부트 스트랩 <mark>
3150
반응형 부스트랩 html small tag
3149
반응형 부트 스트랩의 기본 설정
3148
반응형 부트 스트랩 그리드 시스템
3147
CSS 왼쪽에 툴팁 나오게 하는 소스
3146
CSS 오른쪽에 툴팁 나오게 하는 소스
3145
CSS css를 이용한 툴팁만들기
3144
CSS CSS3 Word Breaking
3143
CSS CSS3 Word Wrapping
3142
CSS CSS3 텍스트 오버플로(CSS3 Text Overflow)
3136
CSS css 이미지 갤러리
3135
CSS CSS 드롭 다운 2
3134
CSS css 기본 툴팁
이전 다음
전체 목록