1. Home
  2. CSS 테두리 (테두리)

최고의 CSS 테두리 (테두리) 튜토리얼 2024년, 이 튜토리얼에서는 CSS의 테두리 속성,테두리 스타일,테두리 스타일 값 :,테두리 폭,예,테두리 색상,예,국경 - 각면에 대해 별도의 설정,예,예,국경 - 약식 속성,예,더 많은 예제,CSS의 테두리 속성,를 배울 수 있습니다.

CSS 테두리 (테두리)

CSS의 테두리 속성

CSS의 테두리 속성은 요소의 테두리 스타일과 색상을 지정할 수 있습니다.

테두리 스타일

테두리 스타일 속성은 경계의 종류를 표시 할 지정합니다.

말테두리 스타일 속성은 테두리의 스타일을 정의하는 데 사용됩니다

테두리 스타일 값 :

없음 : 없음 기본 테두리

점선 : 점선 : 윤곽을 정의

점선 : 점선 상자를 정의

고체 : 고체 경계의 정의

이중 두 경계를 정의합니다. 두 테두리 너비 및 테두리 폭의 동일한 값

홈 : 3D 테두리 정의 홈. 효과는 경계의 색상 값에 따라

능선 : 정의 3D 능선 테두리입니다. 효과는 경계의 색상 값에 따라

삽입은 : 3 차원 임베디드 경계를 정의합니다. 효과는 경계의 색상 값에 따라

처음은 : 3 차원 초기 경계를 정의합니다. 효과는 경계의 색상 값에 따라

보십시오 : 테두리 스타일을 설정

테두리 폭

당신은 테두리 폭 속성으로 테두리의 폭을 지정할 수 있습니다.

두 가지 방법으로 테두리의 폭을 지정합니다 : 당신은 값의 길이를 지정할 수 있습니다와 같은 2 픽셀 또는 0.1em 또는, 중간 (기본값) 얇고 두꺼운 세 개의 키워드 중 하나를 사용하십시오.

참고 : 다른 사용자 에이전트가 각각, 2 픽셀과 1 픽셀을 3px의 설정 동안 CSS,그래서 사용자 에이전트는 각각 3px의 및 2 픽셀을 5px에 동일하게 설정 얇은, 중간 두께 일 수 있으며, 특정 폭이 세 가지 키워드를 정의하지 않습니다.

예

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

»시도

테두리 색상

테두리 색 속성은 테두리의 색상을 설정합니다. 당신은 색상을 설정할 수 있습니다 :

  • 이름 - 예컨대 "레드"로, 색의 이름을 지정
  • RGB - "RGB (255,0,0)"을 같은 같은 RGB 값을 지정할
  • 진수는 - 예 : "# FF0000의"로, 16 진수 값을 지정합니다

또한 테두리 색상을 "투명"을 설정할 수 있습니다.

참고 : 테두리 색은 혼자가 테두리 스타일을 설정하려면 테두리 스타일을 사용하는 데 필요한, 작동하지 않습니다.

예

p.one
{
테두리 스타일 : 고체;
테두리 색 : 빨강;
}
p.two
{
테두리 스타일 : 고체;
테두리 색 : # 98bf21;
}

»시도

국경 - 각면에 대해 별도의 설정

CSS에서, 당신은 다른 측면을 다른 테두리를 지정할 수 있습니다 :

예

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

»시도

위의 예는 하나의 속성을 설정할 수 있습니다 :

예

border-style:dotted solid;

»시도

테두리 스타일 속성은 네 개의 값을 가질 수 있습니다 :

  • 테두리 스타일 : 점선 고체 더블 점선 ;
    • 국경이 곳곳에있다
    • 오른쪽 테두리 고체
    • 이중 아래쪽 테두리
    • 왼쪽 테두리가 점선된다

  • 테두리 스타일은 : 고체 이중 점선;
    • 국경이 곳곳에있다
    • 왼쪽과 오른쪽 테두리는 고체
    • 이중 아래쪽 테두리

  • 테두리 스타일 : 고체 점선;
    • 바닥에 점선 테두리입니다
    • 좌우 테두리 고체

  • 국경 스타일 : 점선;
    • 점선 테두리로 둘러싸인

위의 예는 국경 스타일을 사용합니다. 그러나, 또한 서로 경계 폭 테두리 컬러 일 수있다.

국경 - 약식 속성

위의 예는 경계를 설정하는 속성을 많이 사용합니다.

T는 또한 속성에 경계를 설정할 수 있습니다.

당신은 "경계"속성을 설정할 수 있습니다 :

  • 테두리 폭
  • 테두리 스타일 (필수)
  • 테두리 색

예

border:5px solid red;

»시도

예

더 많은 예제

하나의 선언되는 모든 테두리 속성
이 예는 같은 문에서 네 테두리 속성을 설정하는 약식 속성을 보여줍니다.

설정 테두리 스타일
이 예제에서는 아래쪽 테두리의 스타일을 설정하는 방법을 보여줍니다.

왼쪽 테두리의 폭을 설정
이 예는 왼쪽 테두리의 폭을 설정하는 방법을 보여줍니다.

네 테두리의 색상을 설정합니다
이 예는 네 테두리의 색상을 설정하는 방법을 보여줍니다. 당신은 1 ~ 4 개의 색상을 설정할 수 있습니다.

오른쪽 테두리의 색상을 설정합니다
이 예는 오른쪽 테두리의 색상을 설정하는 방법을 보여줍니다.

CSS의 테두리 속성

재산 기술
경계 성명에서 사방의 속성을 설정하는 데 사용 약식 속성.
테두리 스타일 모든 요소의 테두리 스타일을 설정하거나 개별적으로 각 팀의 테두리 스타일을 설정하는 데 사용됩니다.
테두리 폭 모든 경계 약식 속성은 요소의 폭을 설정, 또는 개별적으로 국경의 양쪽에 폭을 설정합니다.
테두리 색 약식 속성, 보이는 모든 색 테두리 부분의 요소 또는 설정 색상, 각각 네면.
국경 바닥 약식 속성은 문에 국경의 모든 속성을 설정하는 데 사용.
국경 바닥 색 요소의 아래쪽 테두리의 색상을 설정합니다.
국경 바닥 스타일 테두리 스타일 요소를 설정.
국경 바닥 폭 요소의 아래쪽 테두리의 폭을 설정합니다.
국경에서 왼쪽으로 약식 속성은 성명에 대한 모든 왼쪽 테두리 속성을 설정하는 데 사용됩니다.
테두리 왼쪽 컬러 왼쪽 테두리 요소의 색상을 설정합니다.
테두리 왼쪽 스타일 왼쪽 테두리 스타일의 요소입니다.
국경에서 왼쪽으로 폭 왼쪽 테두리 폭의 요소입니다.
국경 오른쪽 성명에있는 상자의 오른쪽에있는 모든 속성을 설정하는 약식 속성.
국경 오른쪽 컬러 오른쪽 테두리 요소의 색상을 설정합니다.
국경 오른쪽 스타일 오른쪽 테두리 스타일의 요소입니다.
국경 오른쪽 폭 오른쪽 테두리 요소의 폭을 설정합니다.
국경 탑 문에 국경에있는 모든 속성을 설정하는 약식 속성.
보더 가기 컬러 요소는 테두리의 색상을 설정합니다.
국경 최고 스타일 요소는 테두리 스타일에 설정됩니다.
보더 상단 너비 요소는 테두리의 폭에 설정됩니다.

핫 튜토리얼

Contact US

CSS 테두리 (테두리)
10/30