CSS => 경계

통사론

경계
border : border-width 테두리 스타일 border-color | 초기 | 상속하다;
border-top : border-width 테두리 스타일 border-color | 초기 | 상속하다;
border-bottom : border-width 테두리 스타일 border-color | 초기 | 상속하다;
border-left : border-width 테두리 스타일 border-color | 초기 | 상속하다;
border-right : border-width 테두리 스타일 border-color | 초기 | 상속하다;
국경 풍
border-style : 1-4 none | 숨겨진 | 점선 | 대시 | 고체 | 더블 | 그루브 | 능선 | 인세트 | 시작 | 초기 | 상속하다;
국경 - 반경
border-radius : 1-4 길이 | % / 1-4 길이 | % | 초기 | 상속하다;
border-top-left-radius : 길이 | % [길이 | %] | 초기 | 상속하다;
border-top-right-radius : 길이 | % [길이 | %] | 초기 | 상속하다;
border-bottom-left-radius : 길이 | % [길이 | %] | 초기 | 상속하다;
border-bottom-right-radius : 길이 | % [길이 | %] | 초기 | 상속하다;
국경 이미지
border-image : border-image-source border-image-slice [테두리 이미지 폭 [테두리 이미지 시작]] border-image-repeat
border-image-source : none | 영상;
border-image-slice : 1-4 숫자 | 비율 [채우기]
border-image-repeat : 1-2 stretch | 반복 | 라운드 | 공간
국경 붕괴
국경 붕괴 : 분리 | 붕괴 | 초기 | 상속하다

비고

국경 - 반경

border-radius 속성을 사용하면 기본 상자 모델의 모양을 변경할 수 있습니다.

요소의 모든 구석에는 해당 모서리의 수직 및 수평 반지름에 대해 최대 두 개의 값을 가질 수 있습니다 (최대 8 개의 값).

첫 번째 값 집합은 수평 반지름을 정의합니다. 선택적인 두 번째 값 세트 앞에 '/'가 오면 수직 반경이 정의됩니다. 한 세트의 값만 제공되면 수직 및 수평 반지름 모두에 사용됩니다.

border-radius: 10px 5% / 20px 25em 30px 35em;

10 10px 은 상단 왼쪽 및 하단 오른쪽의 수평 반지름입니다. 그리고 5% 는 오른쪽 상단과 왼쪽 하단의 수평 반지름입니다. '/'다음의 네 개의 값은 왼쪽 위, 오른쪽 위, 오른쪽 아래 및 왼쪽 아래의 세로 반지름입니다.

많은 CSS 프로퍼티와 마찬가지로 단축형을 사용하여 가능한 모든 값에 사용할 수 있습니다. 따라서 1에서 8까지 값을 지정할 수 있습니다. 다음 속기를 사용하면 모든 구석의 수평 및 수직 반지름을 동일한 값으로 설정할 수 있습니다.

HTML :

<div class='box'></div>

CSS :

.box {
    width: 250px;
    height: 250px;
    background-color: black;
    border-radius: 10px;
}

테두리 반경은 상자 요소를 원으로 변환하는 데 가장 일반적으로 사용됩니다. 경계 반경을 정사각형 요소 길이의 절반으로 설정하면 원형 요소가 만들어집니다.

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

border-radius는 백분율을 허용하기 때문에 일반적으로 border-radius 값을 수동으로 계산하지 않으려면 50 %를 사용하는 것이 일반적입니다.

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

width 및 height 속성이 동일하지 않은 경우 결과 모양은 원이 아닌 타원이됩니다.

브라우저 특정 테두리 반경 예제 :

  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;

국경 풍

border-style 속성은 요소 테두리의 스타일을 설정합니다. 이 속성은 1에서 4까지의 값을 가질 수 있습니다 (요소의 모든면에 대해 하나의 값).

예 :

border-style: dotted;

border-style: dotted solid double dashed;

border-style 은 none 과 hidden 값을 가질 수 있습니다. <table> 요소에 대한 경계 충돌 해결을위한 hidden 작업을 제외하면 동일한 효과가 있습니다. 여러 개의 테두리가있는 <table> 에서 none 가장 낮은 우선 순위를 가지지 않으므로 (충돌시 경계가 표시됨) hidden 이 가장 우선 순위가 높습니다 (충돌시 경계가 표시되지 않음).

국경 (속임수)

대부분의 경우 요소의 모든면에 대해 여러 테두리 속성 ( border-width , border-style 및 border-color )을 정의하려고합니다.

글쓰기 대신 :

border-width: 1px;
border-style: solid;
border-color: #000;

다음과 같이 간단하게 작성할 수 있습니다.

border: 1px solid #000;

이 단축형은 요소의 모든면에 사용할 수 있습니다 : border-top , border-left , border-right 및 border-bottom . 그렇게 할 수 있습니다.

border-top: 2px double #aaaaaa;

국경 이미지

border-image 속성을 사용하면 일반 테두리 스타일 대신 사용할 이미지를 설정할 수 있습니다.

border-image 기본적으로

border-image-source : 사용할 이미지의 경로
border-image-slice : 이미지를 9 개의 영역 (네 모퉁이 , 네 모서리 및 가운데 )으로 나눌 때 사용되는 오프셋을 지정합니다.
border-image-repeat : 테두리 이미지의 측면과 가운데의 이미지 크기를 조정하는 방법을 지정합니다.

다음 예제를보십시오 wheras border.png는 90x90 픽셀의 이미지입니다 :

border-image: url("border.png") 30 stretch;

이미지는 30x30 픽셀의 9 개 영역으로 분할됩니다. 가장자리는 가장자리의 모서리로 사용되고 측면은 중간에 사용됩니다. 요소가 30px보다 높거나 / 넓은 경우 이미지의이 부분이 늘어납니다 . 이미지의 중간 부분은 투명하게되어 있습니다.

border- [left | right | top | bottom]

border-[left|right|top|bottom] 속성은 요소의 특정면에 테두리를 추가하는 데 사용됩니다.

예를 들어, 요소의 왼쪽에 테두리를 추가하려면 다음을 수행 할 수 있습니다.

#element {
    border-left: 1px solid black;
}

국경 붕괴

border-collapse 속성은 table (및 display: table 또는 inline-table 로 display: table 요소)에만 적용되며 표 테두리를 단일 테두리로 축소할지 아니면 표준 HTML에서 분리할지 여부를 설정합니다.

table {
  border-collapse: separate; /* default */
  border-spacing: 2px; /* Only works if border-collapse is separate */
}

또한 Tables - border-collapse documentation 항목을 참조하십시오.

다중 테두리

개요 사용 :

.div1{
  border: 3px solid black; 
  outline: 6px solid blue;
  width: 100px;
  height: 100px;
  margin: 20px;
}

상자 그림자 사용 :

.div2{
  border: 5px solid green; 
  box-shadow: 0px 0px 0px 4px #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}

의사 요소 사용 :

.div3 {
  position: relative;
  border: 5px solid #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}
.div3:before {
  content: " ";
  position: absolute;
  border: 5px solid blue;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

border-image를 사용하여 다중 색상 테두리 만들기

CSS

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

HTML

<div class='bordered'>Border on all sides</div>

위의 예는 5 가지 색상으로 구성된 테두리를 생성합니다. 색상은 linear-gradient 통해 정의됩니다 ( 문서 에서 그라디언트에 대한 자세한 정보를 찾을 수 있습니다). border-image-slice 속성에 대한 자세한 내용은 같은 페이지에서 border-image 예제 를 참조하십시오.

( 참고 : 추가 속성은 프레젠테이션 목적으로 요소에 추가되었습니다. )

왼쪽 테두리에는 단일 색상 (그라디언트의 시작 색상) 만 있고 오른쪽 테두리에는 단일 색상 (그라디언트의 끝 색상) 만 있다는 것을 알았을 것입니다. 이는 경계 이미지 속성이 작동하는 방식 때문입니다. 마치 그라디언트가 전체 상자에 적용된 다음 채우기 영역과 내용 영역에서 색상이 마스크되므로 테두리에만 그라디언트가있는 것처럼 보이게 만듭니다.

어느 테두리가 단색인지는 그라데이션 정의에 따라 다릅니다. 그래디언트가 to right 그래디언트 인 경우 왼쪽 테두리는 그래디언트의 시작 색상이되고 오른쪽 테두리는 끝 색상이됩니다. to bottom 그라디언트의 경우 위쪽 테두리는 그라디언트의 시작 색이되고 아래쪽 테두리는 끝 색이됩니다. 아래는 a to bottom 5까지의 컬러 그라디언트 출력입니다.

테두리가 요소의 특정면에만 필요한 경우 border-width 속성은 다른 일반 테두리와 마찬가지로 사용할 수 있습니다. 예를 들어 아래 코드를 추가하면 요소의 맨 위에 만 테두리가 생깁니다.

border-width: 5px 0px 0px 0px;

border-image 속성을 가진 요소 는 border-radius 존중하지 않을 것입니다 (즉, 경계선이 구부러지지 않습니다). 이는 사양의 아래 진술에 기반합니다.

상자의 배경은 경계선 이미지가 아닌 적절한 배경으로 잘립니다 ( '배경 클립'에 의해 결정됨).

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

CSS
경계

수색…

통사론

비고