HTML5

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-style입니다 none. 이것은 당신이 변경하면 것을 의미 border-width하고,을 border-color, 당신이 아닌 다른이 속성을 변경하지 않는 한 당신은 국경을 볼 수 없습니다 nonehidden.

 

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

 

통사론편집하다

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

산출

CODEPEN에서 열기  JSFIDDLE에서 열기  

특정 ations편집하다

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

브라우저 호환성편집하다

 

  • 바탕 화면
  •  
  • 변하기 쉬운
특색 크롬 가장자리 파이어 폭스 (게코) 인터넷 익스플로러 오페라 원정 여행
기본 지원 1.0 (예) 1.0 (1.7 이하) [1] 4.0 3.5 1.0

 

 

 

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

 


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

 

 

visible: 기본값으로 내용이 더 길어도 그대로 보입니다.

           (내용이 흘러넘침)

 

hidden : 내용이 넘치면 자릅니다. 자른 부분은 보이지 않습니다.

 

scroll : 내용이 넘치지 않아도 항상 스크롤바가 보입니다.

 

auto : 내용이 잘릴 때만 스크롤바가 보입니다.

 

 

 

사용 예:

 

#container

{

overflow: hidden;

}

 

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

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

(scroll 만 짧은 내용)

 

 overflow.htm

 

 

 

 

 

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  머나먼나라

처음으로 벼슬에 오른 자라도 진실로 사물을 사랑하는 마음이 있다면, 다른 이에게 반드시 도움이 되는 바가 있을 것이다. -명도선생

댓글 ( 0)

댓글 남기기

작성