https://developer.mozilla.org/ko/docs/Web/CSS/border-style

 

 

 

 

border-style속성은 element's 국경의 네면에 대한 선 스타일을 설정하는 약식 속성이다.

/* Apply to all four sides */
border-style: dashed;

/* vertical | horizontal */
border-style: dotted solid;

/* top | horizontal | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed; 

/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;

 

초기 값	속기의 각 속성과 같은 : border-top-style: none border-right-style: none border-bottom-style: none border-left-style: none
적용	모든 요소. 또한 적용 ::first-letter.
상속	아니
미디어	시각
계산 된 값	속기의 각 속성과 같은 : border-bottom-style: 지정된 border-left-style: 지정된 border-right-style: 지정된 border-top-style: 지정된
애니메이션 유형	분리 된
캐 노니 컬 위해	공식 문법에 의해 정의 된 고유 비 모호하기 위해

 

통사론편집하다

border-style속성은 1, 2, 3 또는 4 개의 값을 사용하여 지정 될 수있다.

• 하나 개의 값은 모든 적용 사방 .
• 두 값이 먼저 적용 상하 번째 하나 좌우 .
• 세 값을 먼저 적용 가기 둘째, 좌우 및 제 저부 .
• 네 값에 적용 상단 , 우측 , 하단 그리고 좌 순서 (시계 방향)이다.

각 값은 아래 목록에서 선택한 키워드입니다.

값

<br-style>

아래쪽 테두리의 스타일을 설명하는 키워드입니다. 그것은 다음과 같은 값을 가질 수 있습니다 :

none		에 대한 마찬가지로 hidden키워드, 테두리 표시되지 않습니다. 그 경우에 배경 이미지가 설정되어있는 경우를 제외하고,의 계산 된 값이 border-width될 것이다 0속성을 별도로 지정하더라도. 테이블의 셀과 경계를 축소하는 경우, 상기 none값은 가장 낮은 우선 순위를 갖는다 : 그것은 다른 충돌 경계가 설정되어있는 경우,이 표시되는 것을 의미한다.
hidden		에 대한 마찬가지로 none키워드, 테두리 표시되지 않습니다. 그 경우에 배경 이미지가 설정되어있는 경우를 제외하고,의 계산 된 값이 border-width될 것이다 0속성을 별도로 지정하더라도. 테이블의 셀과 경계를 축소의 경우, hidden값이 가장 높은 우선 순위를 갖는다 : 그것은 다른 충돌 경계가 설정되어있는 경우,이 표시되지 않는다는 것을 의미한다.
dotted		둥근 일련의 점을 표시합니다. 도트의 간격은 본 명세서에 의해 정의 및 구현에 특정되지 않는다. 도트의 반경을 계산 절반이다 border-width.
dashed		짧은 평방 종단 대시 또는 일련의 선 세그먼트를 표시합니다. 세그먼트의 정확한 크기와 길이는 사양에 의해 정의 구현에 특정되지 않습니다.
solid		하나, 직선, 실선을 표시합니다.
double		로 정의 픽셀 양을 추가 할 두 개의 직선을 표시합니다 border-width.
groove		조각 된 효과로 이어지는 테두리를 표시합니다. 그것은 반대입니다 ridge.
ridge		이 페이지에서 오는 경우처럼, 3D 효과와 테두리를 표시합니다. 그것은 반대입니다 groove.
inset		임베디드 나타나는 상자를 만드는 테두리를 표시합니다. 그것은 반대입니다 outset. 있는 테이블 셀에인가되면 border-collapse설정하기 위해 collapsed이 값처럼 동작 groove.
outset		상자가 양각, 3D로 보이게 테두리를 표시합니다. 그것은 반대입니다 inset. 있는 테이블 셀에인가되면 border-collapse설정하기 위해 collapsed이 값처럼 동작 ridge.

공식 구문

CSS 구문을 읽는 방법

<BR-스타일> { 1,4 }

어디에
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

예편집하다

모든 속성 값을 표

여기에 모든 속성 값의 예는

HTML 내용

<table>
    <tr>
        <td class="b1">none</td>
        <td class="b2">hidden</td>
        <td class="b3">dotted</td>
        <td class="b4">dashed</td>
    </tr>
    <tr>
        <td class="b5">solid</td>
        <td class="b6">double</td>
        <td class="b7">groove</td>
        <td class="b8">ridge</td>
    </tr>
    <tr>
        <td class="b9">inset</td>
        <td class="b10">outset</td>
    </tr>
</table>

CSS 내용

/* Define look of the table */
table {
    border-width: 3px;
    background-color: #52E396;
}
tr, td {
    padding: 2px;
}

/* border-style example classes */
.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;}
.b4 {border-style:dashed;}
.b5 {border-style:solid;}
.b6 {border-style:double;}
.b7 {border-style:groove;}
.b8 {border-style:ridge;}
.b9 {border-style:inset;}
.b10 {border-style:outset;}

산출

특정 ations편집하다

사양	지위	논평
CSS의 배경 및 테두리 모듈 레벨 3 이 사양에서 '국경 스타일'의 정의.	후보 추천	변경 없음
CSS 레벨 2 (개정 1) 이 규격에서 '국경 스타일'의 정의.	추천	추가 hidden
CSS 레벨 1 이 규격에서 '국경 스타일'의 정의.	추천	초기 등록

브라우저 호환성편집하다

 

 

 

 

overflow 속성은 요소의 박스에 내용이 더 길 때 어떻게 보일지 선택하는 속성입니다.

 

상속여부: 상속되지 않음. 

 

visible: 기본값으로 내용이 더 길어도 그대로 보입니다.            (내용이 흘러넘침)   hidden : 내용이 넘치면 자릅니다. 자른 부분은 보이지 않습니다.   scroll : 내용이 넘치지 않아도 항상 스크롤바가 보입니다.   auto : 내용이 잘릴 때만 스크롤바가 보입니다.

 

 

사용 예:

 

#container

{

overflow: hidden;

}

 

그럼 실제 400x 100 크기의 박스를 만들어서

똑같은 내용을 담아보겠습니다.

(scroll 만 짧은 내용)

 

 overflow.htm