CSS 테두리 속성
하는 CSS border 속성은 요소의 테두리 스타일, 폭 및 색상을 지정할 수 있습니다.
이 요소는 15 픽셀 폭 녹색 그루브 테두리가 있습니다.
테두리 스타일
border-style 속성은 테두리의 종류가 표시 지정합니다.
다음 값을 사용할 수 있습니다 :
-
dotted- 점선 테두리를 정의 -
dashed- 점선 테두리를 정의 -
solid- 고체 경계를 정의 -
double- 더블 경계를 정의 -
groove- 3 차원 홈 테두리를 정의합니다. 효과는 테두리 컬러 값에 의존 -
ridge- 3 차원 래치의 경계를 정의합니다. 효과는 테두리 컬러 값에 의존 -
inset- 3 차원 삽입 경계를 정의합니다. 효과는 테두리 컬러 값에 의존 -
outset- 3 차원 처음 경계를 정의합니다. 효과는 테두리 컬러 값에 의존 -
none- 테두리를 정의합니다 -
hidden- 숨겨진 경계를 정의
border-style 속성은 1 ~ 4 개의 값에서 (위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리 및 왼쪽 테두리) 할 수 있습니다.
예
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;}결과:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
»그것을 자신을 시도  | 참고 :하지 않는 한 아래에 설명 된 기타 CSS의 테두리 속성 중에 어떤 영향을 미치지 않습니다 border-style 속성을 설정! |
|---|
테두리 폭
border-width 속성은 네 테두리의 폭을 지정합니다.
폭 (에 특정 크기로 설정 될 수있다 px, pt, cm, em 얇은 중간, 두께 : 등) 또는 세 개의 미리 정의 된 값 중 하나를 사용하여.
border-width 이 호텔은 1 ~ 4 개의 값에서 (위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리 및 왼쪽 테두리) 할 수 있습니다.
예
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
»그것을 자신을 시도 테두리 색상
border-color 속성은 네 테두리의 색상을 설정하는 데 사용됩니다.
색을 설정할 수있다 :
- name - 같은 색 이름을 지정 "red"
- Hex -와 같은 16 진수 값 지정 "#ff0000"
- RGB - 같은 RGB 값 지정 "rgb(255,0,0)"
- transparent
border-color 속성은 1 ~ 4 개의 값에서 (위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리 및 왼쪽 테두리) 할 수 있습니다.
경우 border-color 설정되지 않고, 그 요소의 색을 상속한다.
예
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
} »그것을 자신을 시도 국경 - 개별 매칭
당신이 위의 예에서 각 팀의 다른 테두리를 지정할 수 있음을 보았다.
CSS에서 국경 (위, 오른쪽, 아래, 왼쪽)의 각을 지정하는 속성도 있습니다 :
예
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} »그것을 자신을 시도 위의 예는이 같은 결과를 제공합니다 :
어떻게 작동하는지 그래서, 여기입니다 :
경우 border-style 속성은 네 개의 값이 있습니다 :
- border-style : 점선 고체 더블 점선;
- 위의 경계는 점을 찍는다
- 오른쪽 테두리는 고체
- 아래쪽 테두리는 더블
- 왼쪽의 경계는 점선된다
경우 border-style 속성은 세 가지 값이 있습니다 :
- border-style : 고체 이중 점선;
- 위의 경계는 점을 찍는다
- 좌우 테두리 고체
- 아래쪽 테두리는 더블
경우 border-style 속성은 두 개의 값이 있습니다 :
- border-style : 고체 점선;
- 상단과 하단 테두리 점선입니다
- 좌우 테두리 고체
경우 border-style 속성은 하나의 값을 갖는다 :
- border-style : 점선;
- 네 테두리 점선입니다
border-style 속성은 위의 예에서 사용된다. 그러나, 이는 또한 작동 border-width 과 border-color .
국경 - 약식 속성
위의 예에서 볼 수 있듯이, 국경을 처리 할 때 고려해야 할 여러 속성이 있습니다.
코드를 단축하기 위해, 하나의 속성으로 모든 개별 테두리 속성을 지정하는 것도 가능하다.
border 속성은 다음 각 테두리 속성에 대한 약식 속성이다 :
-
border-width -
border-style(필수) -
border-color
더 예
하나의 선언에서 모든 위쪽 테두리 속성
이 예는 하나의 선언에 위쪽 테두리에 대한 모든 속성을 설정하는 약식 속성을 보여줍니다.
아래쪽 테두리의 스타일을 설정
이 예제에서는 아래쪽 테두리의 스타일을 설정하는 방법을 보여줍니다.
왼쪽 테두리의 폭을 설정
이 예는 왼쪽 테두리의 폭을 설정하는 방법을 보여줍니다.
네 테두리의 색상을 설정합니다
이 예는 네 테두리의 색상을 설정하는 방법을 보여줍니다. 그것은 하나에서 4 색을 가질 수 있습니다.
오른쪽 테두리의 색상을 설정합니다
이 예는 오른쪽 테두리의 색상을 설정하는 방법을 보여줍니다.
연습으로 자신을 테스트!
모든 CSS 테두리 속성
| 재산 | 기술 |
|---|---|
| border | 하나의 선언에서 모든 테두리 속성을 설정합니다 |
| border-bottom | 하나의 선언에서 모든 아래쪽 테두리 속성을 설정합니다 |
| border-bottom-color | 아래쪽 테두리의 색상을 설정합니다 |
| border-bottom-style | 아래쪽 테두리의 스타일을 설정합니다 |
| border-bottom-width | 아래쪽 테두리의 폭을 설정합니다 |
| border-color | 네 테두리의 색상을 설정합니다 |
| border-left | 하나의 선언에서 모든 왼쪽 테두리 속성을 설정합니다 |
| border-left-color | 왼쪽 테두리의 색상을 설정합니다 |
| border-left-style | 왼쪽 테두리의 스타일을 설정합니다 |
| border-left-width | 왼쪽 테두리의 폭을 설정합니다 |
| border-right | 하나의 선언에서 모든 오른쪽 테두리 속성을 설정합니다 |
| border-right-color | 오른쪽 테두리의 색상을 설정합니다 |
| border-right-style | 오른쪽 테두리의 스타일을 설정합니다 |
| border-right-width | 오른쪽 테두리의 폭을 설정합니다 |
| border-style | 네 테두리의 스타일을 설정합니다 |
| border-top | 하나의 선언에서 모든 위쪽 테두리 속성을 설정합니다 |
| border-top-color | 위쪽 테두리의 색상을 설정합니다 |
| border-top-style | 위쪽 테두리의 스타일을 설정합니다 |
| border-top-width | 위쪽 테두리의 폭을 설정합니다 |
| border-width | 네 테두리의 폭을 설정합니다 |