CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS border-top-width 속성 CSS3 border-top-right-radius 속성

CSS border-top-size 속성

border-top-style 속성의 사용 방법 및 예제border-style또는border-top이와 같은 줄여서 CSS 속성은 사용하기 더 편리하며, 더 적절합니다.

아래 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 나타냅니다.

기본 값:	none
적용 대상:	모든 요소
thừa kế:	없음
애니메이션 가능:	아니요.참조하십시오 애니메이션 속성。
버전：	CSS 1，2，3
JavaScript 문법：	object.style.borderTopStyle="dotted"

border-top-style 사용 문법

이 속성의 문법은 다음과 같습니다：

border-top-style:　none　|　hidden　|　dotted　|
　　　　　　　　　　　　　　　　　　　　dashed　|　solid　|　double　|
　　　　　　　　　　　　　　　　　　　　groove　|　ridge　|　inset　|　outset　|　inherit

아래 예제는 border를 사용하는 방법을 보여줍니다-top-style 속성.

예제

　　p　{
　　　border-top-style:　dashed;
　　　border-top-width:　3px;
　　}

테스트를 보려면‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다

값	설명
none	테두리를 표시하지 않습니다
hidden	와 같은 none, 다른 점은 테이블 셀에접혀진 테두리또한 두 셀이 공유된 테두리를 가집니다. hidden 값은 테두리를 그리지 않도록 보장합니다.
dotted	테두리를 연속적인 점으로 표시합니다
dashed	테두리를 연속적인 짧은 선 단위로 표시합니다
solid	테두리를 일 줄의 실선으로 표시합니다
double	테두리를 두 줄의 평행한 실선으로 표시하고, 그 사이에 여유를 두고 있습니다. 두 줄의 총 길이와 그 사이의 간격은border-width의 값을 나타냅니다
groove	캔버스에 새겨진 테두리를 표시합니다. 이는3D의 인상, 일반적으로 테두리 색상보다border-color더 밝고 더 어두운 두 가지 색상으로 그림자를 만들어줍니다
ridge	효과와 반대의 테두리 groove를 표시합니다. 또한,3D의 인상, 테두리가 캔버스에서 나오는 것처럼 보입니다
inset	테두리를 표시하여 요소의 프레임이 캔버스에 들어가는 것처럼 보입니다. 이는3D, 이는 일반적으로 그림자의 두 가지 색상을 사용하여 테두리 색상보다border-color약간 밝고 깊은 두 가지 색상으로 그림자를 만들어줍니다
outset	효과와 반대의 테두리 inset을 표시합니다. 또한,3D의 인상, 테두리가 캔버스에서 나오는 것처럼 보입니다
initial	이 속성을 기본 값으로 설정합니다
inherit	지정된 경우, 관련 요소는 부모 요소의 border를 사용합니다-top-style 속성 값

브라우저 호환성

border-top-style 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저가 이 속성을 지원합니다。

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 4+

경고: Internet Explorer 7및 이전 버전은 value hidden을 지원하지 않습니다。IE8지원하지만<!DOCTYPE>。IE9및 이후 버전이 hidden 값을 지원합니다。

더 읽어보기

튜토리얼 참조:CSS Border，CSS3 Border。

관련 속성:border，border-style，border-top，border-top-color，
border-top-width。

CSS border-top-width 속성 CSS3 border-top-right-radius 속성