재산 CSS – « 국경"를 사용하면 요소 주변의 선 두께, 색상 및 유형을 설정할 수 있습니다. 이 속성의 매개변수는 한 줄에 공백으로 구분하여 임의의 순서로 쓸 수 있습니다.

• - 선 두께 1픽셀
• - 실선
• - 화이트 색상
• - 검은 색
• - 그레이 색상

단색 요소 테두리

점선 요소 테두리

점선 요소 테두리

요소 테두리 이중선

테두리의 개별 섹션 속성

볼륨이 감소된 골판지 프레임

볼록한 골판지 프레임

체적 우울 프레임

체적 볼록 프레임

수업 / CSS /

7과

거의 모든 사이트는 요소 주위에 테두리를 만드는 속성을 사용합니다. 버튼이나 텍스트가 있는 블록에 필요합니다. 테두리를 만들기 위해 CSS의 요소에는 테두리와 외곽선의 두 가지 속성이 있습니다. 그들을 고려해 봅시다.

국경

이 속성은 요소 주위에 프레임을 설정하는 데 필요하며 웹 문서의 테두리를 나타내며 요소를 배치할 때 프레임 너비가 고려됩니다. 색상, 두께 및 프레임 유형의 3가지 값이 있습니다.

border 속성의 구문은 다음과 같습니다.

테두리: 너비 유형 색상;
속성 값을 지정하기 위해 다른 순서를 선택할 수도 있지만 가장 중요한 것은 공백을 통한 것입니다.

프레임의 두께(너비)는 픽셀(px) 또는 백분율(%)로 지정해야 합니다.
색상은 다음 중 하나에서 설정할 수 있습니다. RGB 형식(빨간색 녹색 파란색) 또는 HTML HEX 코드.

아래는 라인 유형그들의 이름과 함께:

요소의 테두리를 설정하는 방법은 무엇입니까? 우리는 다음과 같이 합니다:

#차단하다(
테두리:3px 솔리드 #0085ss; /* 선을 3px 두께의 파란색으로 설정 */
}

1개, 2개, 3개를 설치하려면 한쪽에 프레임, 다음과 같이 지정합니다.

보더 탑- 상단 프레임
경계 바닥- 하단 프레임
경계 왼쪽- 왼쪽 프레임;
경계 오른쪽- 오른쪽 프레임;

차단하다 (
border-right: 3px 솔리드 #0085cc;
border-bottom: 2px 파선 #0085cc;
}

원하는 경우 프레임 제거 CSS의 요소, 속성 테두리에 쓰기 - 없음

비어 있는(
테두리: 없음 /* 클래스가 비어 있는 요소에는 테두리가 없습니다 */
}

개요

Outline은 요소의 외부 테두리를 설정하는 데 필요한 속성입니다.

있다 국경과의 두 가지 차이점:
첫째, 윤곽선에 지정된 선은 블록 자체의 위치, 너비 및 높이에 영향을 미치지 않습니다.
둘째, 특정 측면에서 프레임을 설치할 가능성이 없습니다.
구문은 테두리와 동일합니다.

개요: 2px 점선 #0085cc; /* 테두리 2px 파란색 점선 */
외곽선과 테두리의 경우 없음을 작성하여 테두리를 제거할 수 있습니다.

관심을 가져주셔서 감사합니다!

이전 기사
6과

요소 테두리.

CSS의 패딩 및 여백. 여백과 패딩이란 무엇입니까? 다음 기사
Lesson 8. CSS에서 요소의 텍스트 색상과 배경을 설정하는 방법은 무엇입니까?

기사에 대한 댓글(vk.com)

국경

브라우저 지원

설명

CSS 속성을 사용하면 블록 테두리의 너비, 스타일 및 색상을 동시에 설정할 수 있습니다. 블록 테두리는 모든 면에서 블록을 둘러싸는 단순한 선/프레임입니다. 프레임을 추가할 때 블록의 전체 크기에 영향을 미친다는 점을 염두에 두어야 합니다.

값은 공백으로 구분되며 순서에 상관없이 브라우저가 원하는 매개변수와 일치하는 값을 결정합니다. 세 값을 모두 지정할 필요는 없으며 너비 및/또는 색상을 생략할 수 있습니다. 이 경우 누락된 값 대신 기본 속성에 설정된 값이 사용됩니다. 예를 들어 너비가 지정되지 않은 경우 속성의 기본값이 사용됩니다. 구문 아래의 표는 사용할 수 있는 속성 값을 보여줍니다.

참고: 요소의 특정 측면에만 테두리를 설정하려면 border-top, border-bottom, border-left, border-right 속성을 사용하십시오.

팁: 일반적으로 테두리를 사용할 때 패딩을 추가해야 합니다.

CSS 속성: 테두리

블록 테두리와 그 내용(텍스트, 이미지 또는 자식 태그) 사이에 공백을 추가합니다. 일반적으로 테두리는 요소의 내용에 가깝게 표시되며 이미지 주위에 테두리를 설정해야 하는 경우에만 유용합니다.

통사론

테두리: 테두리 너비 테두리 스타일 테두리 색상|상속;

속성 값

예시

여기에 약간의 텍스트가 있습니다.

결과 이 예브라우저 창에서:

상자의 테두리 색상, 스타일 및 크기를 설정하는 방법입니다.

마크업 언어에서 테두리( 국경), 표, 그림 및 프레임만 있고 경우에 따라 테두리 색상을 설정할 수 있습니다.

테두리 속성

Cascading Style Sheets는 더 많은 옵션을 제공하지만 가장 먼저 해야 할 일입니다.

CSS에서는 다음을 사용하여 테두리(테두리)의 너비를 제어할 수 있습니다. 테두리 너비, 더 정확하게 말하면 각 면의 두께를 개별적으로 제어할 수 있습니다.
테두리 상단 너비- 상단 테두리 두께
테두리 오른쪽 너비- 오른쪽 연석의 두께
테두리 하단 너비- 하단 테두리 두께
테두리 왼쪽 너비- 왼쪽 테두리의 두께
그러나 다음과 같이 단축할 수도 있습니다.
P(테두리 너비: 상단 오른쪽 하단 왼쪽;)(위 오른쪽 아래 왼쪽).
테두리 너비를 설정할 수 있습니다.
인물 DIV(border-width:5px), 0에서 무한대까지, 즉 긍정적인.
얇은- 가는 테두리, DIV(border-width:thin)
중간- 가운데 테두리, DIV(border-width:medium)
두꺼운- 두꺼운 테두리, DIV(border-width:thick)
숫자로 명확하지만 이러한 값을 사용하면 모두 브라우저에 따라 다르지만 여전히 얇은<= medium <= thick .

우리는 또한 다음을 사용하여 테두리의 색상을 제어할 수 있습니다. 테두리 색상또는 더 정확한 각 면의 색상:
테두리 상단 색상상단 테두리 색상
테두리 오른쪽 색상오른쪽 테두리의 색상;
테두리 바닥 색상아래쪽 테두리의 색상;
테두리 왼쪽 색상왼쪽 테두리 색상.
색상 값은 다음과 같이 설정됩니다. 색깔, 즉. 16가지 색상 중 하나: 아쿠아, 검은, 푸른, 자홍색, 회색, 녹색, 라임, 적갈색, 해군, 올리브, 자, 빨간, 은, 청록색, 흰색 또는 노란색, 색상을 설정할 수도 있습니다. 색상: #000000, 색상:#AF0 , 색상:rgb(255,0,0)또는 색상:rgb(100%, 0%, 0%).
어떤 색 구성표를 선택하든 브라우저는 여전히 그것을 다음으로 변환합니다. 색상:rgb(255,0,0). 예를 들어 색상:라임 = 색상:#00ff00 = 색상:#0F0 = 색상:rgb(0%, 100%, 0%), 하지만 브라우저에는 중요하지 않습니다. 색상:rgb(0,255,0), 즉. 이 값을 계산합니다.

테두리의 두께와 색상도 HTML로 제어할 수 있는 경우 스타일( 테두리 스타일) CSS만!!!
스타일은 각 측면에서 개별적으로 제어할 수 있습니다.
보더 탑 스타일상단 테두리 스타일;
테두리 오른쪽 스타일오른쪽 테두리 스타일;
보더 바텀 스타일하단 테두리 스타일;
테두리 왼쪽 스타일왼쪽 테두리 스타일.
이제 스타일의 값을 고려하십시오.
1)테두리 스타일:없음- 이것은 border-width:0과 유사한 기본값입니다.
2)테두리 스타일:숨김- 나중에 고려할 테이블(테이블)을 제외하고 동일합니다.
3)테두리 스타일:점선- 점의 테두리.
4)테두리 스타일:파선— 점선에서 경계.
5)테두리 스타일:솔리드- 실선 테두리, 즉 HTML에서처럼.
6)테두리 스타일:이중- 이중 실선의 테두리, 여기에 최소 3픽셀의 두께(테두리 너비)가 필요합니다.
7)테두리 스타일:홈- 테두리가 캔버스로 잘려진 것처럼 보입니다.
8)테두리 스타일:릿지— 테두리가 캔버스에서 튀어나온 것처럼 보입니다.
9)테두리 스타일:삽입- 전체 상자가 캔버스에 눌려진 것처럼 보입니다.
10)테두리 스타일:시작- 이전과 반대입니다.
일부 브라우저는 점선, 파선, 이중, 홈, 능선, 인셋 및 아웃셋 값을 무시하고 솔리드로 출력할 수 있습니다. 평범한 국경.

물론 이것은 모두 사실이지만 위의 모든 예는 작동 원리일 뿐 메커니즘이 아닙니다.
규칙 속성 국경(테두리: 크기 스타일 색상;)을 의미하는 경우 이 규칙은 세 값이 모두 존재하고 이 순서로만 실행됩니다. 예를 들어 H1(테두리: 5px 더블 레드;), 그러나 이러한 값이 표와 같이 마크업 언어로 제공되는 경우 예외가 있을 수 있습니다. 표(테두리: 2px), 즉. 하나의 값만 제공됩니다.

연석 전체가 아니라 각 부분을 별도로 관리하기 위해 다음과 같은 규칙이 있습니다.
(border-top: 크기 스타일 색상;)상부 연석 통제;
(테두리-오른쪽: 크기 스타일 색상;)오른쪽의 커브 컨트롤;
(테두리-하단: 크기 스타일 색상;)낮은 연석 통제;
(테두리-왼쪽: 크기 스타일 색상 ;)왼쪽의 커브 컨트롤.
이러한 규칙은 개별적으로 또는 모두 함께 사용할 수 있습니다.

예외는 다음 규칙입니다.
H1(
테두리: 4px 단색 녹색;
}
문제는 CSS에서 마지막 규칙의 우선 순위가 가장 높다는 것입니다. 이 경우 border 속성에는 border-left가 포함되어 있으므로 border-left 규칙은 다음과 같이 무시됩니다.
H1(
테두리: 4px 단색 녹색;
border-left: 2px 더블 레드;
}
먼저 전체 연석에 대한 규칙을 설정한 다음 개별 섹션에 대한 규칙을 설정합니다.

나는 우리가 테이블과 다른 예외에 도달할 때 일부 속성을 고려할 것이라는 점을 제외하고 요소의 테두리에 대한 모든 것을 가지고 있습니다.

CSS: 테두리. 요소 테두리.

CSS3 테두리

CSS3 테두리

CSS3를 사용하면 Photoshop과 같은 디자인 프로그램을 사용하지 않고도 둥근 테두리를 만들고 컨테이너에 그림자를 추가하고 이미지를 테두리로 사용할 수 있습니다.

이 단원에서는 다음 테두리 속성에 대해 알아봅니다.

• 경계 반경
• 상자 그림자
• 테두리 이미지

브라우저 지원

Internet Explorer 9는 새로운 테두리 속성 중 일부를 지원합니다.

Firefox는 border-image에 -moz- 접두사가 필요합니다.

Chrome 및 Safari에는 border-image에 -webkit- 접두사가 필요합니다.

Opera는 테두리 이미지에 -o-가 필요합니다.

Safari에는 box-shadow에 대한 -webkit- 접두사도 필요합니다.

Opera는 새로운 테두리 속성을 지원합니다.

CSS3 둥근 모서리

CSS2에서 둥근 모서리를 추가하는 것은 까다로웠습니다. 각 코너마다 다른 이미지를 사용해야 했습니다.

CSS3에서는 둥근 모서리를 만드는 것이 쉽습니다.

CSS3에서 border-radius 속성은 둥근 모서리를 만드는 데 사용됩니다.

이 블록에는 둥근 모서리가 있습니다!

CSS3 컨테이너 섀도우

CSS3에서 box-shadow 속성은 상자에 그림자를 추가하는 데 사용됩니다.

CSS3 테두리 이미지

CSS3 border-image 속성을 사용하면 이미지를 사용하여 테두리를 만들 수 있습니다.

border-image 속성을 사용하면 이미지 테두리를 지정할 수 있습니다!

테두리를 만드는 데 사용된 원본 이미지는 다음과 같습니다.

새 테두리 속성

테두리 속성

테두리 속성, 태그

HTML 테두리

값 없이 테두리를 사용할 수 있으며 테두리 두께는 1픽셀과 같습니다. 기본적으로 프레임은 3D 효과와 함께 표시되지만 배경 속성을 추가로 적용하면 프레임이 "플랫"이 됩니다.

또한 border 속성에 0이 아닌 값이 있으면 브라우저는 셀 자체 주위에 얇은 테두리도 표시합니다. 이러한 경계의 표시는 규칙 속성을 사용하여 제어할 수 있습니다.

가치

속성 값은 픽셀 단위로 크기를 지정하는 음수가 아닌 숫자일 수 있습니다.

기본값: 0.

통사론

필수 속성: 없음.

HTML 예제: 테두리 속성 적용

예시 결과

결과. 테두리 속성을 적용합니다.

남자 이름 2016-06-11 1 HTML 및 CSS 0

CSS에서 이중 테두리를 만드는 방법은 무엇입니까?

안녕 모두. CSS에서 이중 테두리를 만드는 방법을 알고 있습니까? 그렇지 않은 경우 이 짧은 메모를 읽으십시오. 요점은 일반 테두리로 이 작업을 수행할 수 없으며 다른 방향으로 가야 한다는 것입니다.

border 속성으로 테두리를 설정하면 하나만 설정할 수 있습니다. 그러나 매우 자주 디자인에는 여러 프레임이 필요할 수 있습니다. 이 경우 의사 프레임인 그림자를 사용해야 합니다.

상자 그림자가 있는 이중 테두리

일반적으로 CSS의 그림자를 더 자세히 연구하려면 관련 주제를 읽는 것이 좋습니다. 이 글에서는 속성 구문에 대해 자세히 설명하지 않고 이중 테두리를 만드는 방법만 보여줍니다. 그래서 나는 몇 가지 스타일을 처방 할 일반 블록을 만들 것입니다. 블록은 모든 콘텐츠가 포함될 수 있습니다. 제 경우에는 간단한 div이므로 html 코드도 표시하지 않겠습니다. 스타일은 다음과 같습니다.

사업부(
배경: #E0D8A3;
너비: 180px
높이: 110px;
패딩: 12px
}

글쎄요, 블록 디자인의 전형적인 예입니다.
이제 여러 그림자를 사용하여 이중 테두리를 만들어 보겠습니다. 블록 스타일에 다음 속성을 추가합니다.

상자 그림자: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

다음과 같이 보입니다.

보시다시피 꽤 멋지게 나왔습니다. box-shadow에는 5개의 매개변수만 있습니다. 첫 번째는 그림자의 수평 오프셋이고 두 번째는 수직 오프셋입니다. 세 번째와 네 번째 매개변수는 흐림과 늘이기입니다. 보시다시피 처음 세 개는 전혀 건드리지 않습니다. 선명한 그림자가 필요하기 때문에 흐림 효과가 필요하지 않습니다. 보시다시피 네 번째 매개 변수인 스트레칭을 처방했습니다. 그림자가 부착된 요소보다 얼마나 큰 그림자가 될 것인지를 결정합니다.

기본적으로 모든 것이 다음과 같이 보입니다. 그림자는 요소와 크기가 같고 요소 아래에 명확하게 놓여 있습니다. 스트레치를 변경하면 그림자가 요소 너머로 돌출되기 시작합니다. 이것이 border 속성과 정확히 동일한 테두리를 만드는 방법입니다. 글쎄, 다섯 번째 매개 변수를 사용하면 모든 것이 명확하다고 생각합니다. 이것은 그림자의 색상입니다.

보시다시피, 각 새 그림자에 대한 매개변수를 쉼표로 구분하여 나열했습니다. 같은 방법으로 삼중 테두리 등을 만들 수 있다고 이미 추측했다고 생각합니다. 여기에는 제한이 없습니다. 사실 저 같은 경우는 이슈가 종료된 상태이고 궁금한 사항은 댓글로 적어주시면 됩니다.

잠시만 관심을 가져주세요.우리 모두는 신뢰할 수 있는 호스팅에 사이트를 배치하기를 원합니다. 수백 개의 호스트를 분석하고 가장 좋은 호스트를 찾았습니다. 호스트IQ네트워크에는 이에 대한 수백 개의 긍정적인 리뷰가 있으며 평균 사용자 평점은 5점 만점에 4.8점입니다. 귀하의 사이트를 훌륭하게 만드십시오.

설명

테두리 범용 속성을 사용하면 요소 주위의 테두리 너비, 스타일 및 색상을 동시에 설정할 수 있습니다. 값은 공백으로 구분하여 임의의 순서로 갈 수 있으며 브라우저는 원하는 속성에 해당하는 값을 결정합니다. 요소의 특정 면에만 테두리를 설정하려면 border-top , border-bottom , border-left , border-right 속성을 사용하십시오.

통사론

가치

border-width 값은 테두리의 너비를 결정합니다. 모양을 제어하기 위해 여러 테두리 스타일 값이 제공됩니다. 그들의 이름과 행동의 결과는 그림 1에 나와 있습니다. 하나.

그림 1. 프레임 스타일

border-color는 테두리의 색상을 설정하며 값은 유효한 CSS 형식일 수 있습니다.

상속은 부모의 값을 상속합니다.

HTML5 CSS2.1 IE Cr Op Sa Fx

이 예에서는 레이어 주위에 이중 테두리가 추가되었습니다. 결과는 그림에 나와 있습니다. 2.

쌀. 2. 테두리 속성 적용

개체 모델

document.getElementById("elementID").style.border

브라우저

Internet Explorer 버전 6 이하에서는 테두리 너비가 1px인 점선으로 렌더링됩니다. 2px 이상에서는 점 값이 올바르게 작동합니다. 이 버그는 IE7에서 수정되었지만 모든 1px 테두리에만 적용됩니다. 상자의 테두리 중 하나가 2px 이상인 경우 IE7에서 점선이 파선으로 바뀝니다.

Internet Explorer 버전 7.0까지는 상속 값을 지원하지 않습니다.

groove , ridge , inset 또는 outset 값을 사용할 때 테두리 스타일은 브라우저마다 약간 다를 수 있습니다.

설명

테두리 범용 속성을 사용하면 요소 주위의 테두리 너비, 스타일 및 색상을 동시에 설정할 수 있습니다. 값은 공백으로 구분하여 임의의 순서로 갈 수 있으며 브라우저는 원하는 속성에 해당하는 값을 결정합니다. 요소의 특정 면에만 테두리를 설정하려면 border-top , border-bottom , border-left , border-right 속성을 사용하십시오.

통사론

가치

border-width 값은 테두리의 너비를 결정합니다. 모양을 제어하기 위해 여러 테두리 스타일 값이 제공됩니다. 그들의 이름과 행동의 결과는 그림 1에 나와 있습니다. 하나.

그림 1. 프레임 스타일

border-color는 테두리의 색상을 설정하며 값은 유효한 CSS 형식일 수 있습니다.

상속은 부모의 값을 상속합니다.

HTML5 CSS2.1 IE Cr Op Sa Fx

이 예에서는 레이어 주위에 이중 테두리가 추가되었습니다. 결과는 그림에 나와 있습니다. 2.

쌀. 2. 테두리 속성 적용

개체 모델

document.getElementById("elementID").style.border

브라우저

Internet Explorer 버전 6 이하에서는 테두리 너비가 1px인 점선으로 렌더링됩니다. 2px 이상에서는 점 값이 올바르게 작동합니다. 이 버그는 IE7에서 수정되었지만 모든 1px 테두리에만 적용됩니다. 상자의 테두리 중 하나가 2px 이상인 경우 IE7에서 점선이 파선으로 바뀝니다.

Internet Explorer 버전 7.0까지는 상속 값을 지원하지 않습니다.

groove , ridge , inset 또는 outset 값을 사용할 때 테두리 스타일은 브라우저마다 약간 다를 수 있습니다.

테두리 일반 속성은 요소의 테두리를 제어하는 ​​데 사용됩니다. 이 속성을 사용하면 단일 선언에서 요소 테두리의 너비, 스타일 및 색상을 설정할 수 있습니다.

이 세 가지 속성(폭, 스타일, 테두리 색상)은 단일 선언에서 설정할 수 있습니다. 다음은 예입니다.

요소의 한쪽에만 테두리 스타일을 지정할 수 있습니다. 이렇게 하려면 border-top(상단 테두리), border-right(오른쪽 테두리), border-bottom(하단 테두리), border-left(왼쪽 테두리) 속성을 사용합니다.

이 예에서 블록의 각 면에는 고유한 테두리 두께, 스타일 및 색상이 있습니다.

CSS를 사용하여 다음과 같은 모양을 만드는 것을 고려하십시오.

테두리 값 - 두께, 스타일 및 색상 - 특수 속성을 사용하여 별도로 설정할 수 있습니다.

• border-style - 테두리의 스타일.
• border-width - 테두리의 너비.
• border-color - 테두리의 색.

각 값을 별도로 고려합시다.

테두리 스타일 속성입니다. 테두리 스타일입니다.

border-style 속성은 테두리 스타일을 설정합니다. CSS에서 HTML과 달리 요소의 테두리는 단순한 솔리드 이상일 수 있습니다. 테두리 스타일에 유효한 값은 다음과 같습니다.

1. 없음 - 테두리 없음(기본값).
2. 단색 - 단색 테두리.
3. 이중 - 이중 테두리.
4. 파선 - 점선 테두리.
5. 점선 - 일련의 점으로 구성된 테두리.
6. 릿지 - "릿지" 테두리.
7. 그루브 - 테두리 "그루브".
8. 삽입 - 삽입 테두리.
9. 시작 - 돌출된 테두리.

그들이 어떻게 생겼는지의 예.

국경 없음(없음)

단색 테두리(단색)

이중 테두리(이중)

점선 테두리(점선)

점선 테두리(파선)

그루브 테두리(그루브)

능선 경계

들여쓰기 테두리(삽입)

돌출된 테두리(시작)

그런데 능선 프레임의 테두리 색상을 검은색으로 설정하면 다음과 같은 결과가 나옵니다.

검은색 테두리와 능선 스타일이 있는 div 블록.

테두리가 단색으로 보이지만 검은색 그림자 효과를 추가하여 능선 스타일이 생성되고 검은색 테두리에 검은색 효과가 보이지 않기 때문입니다.

border-style 속성을 사용하면 블록의 모든 면에만 테두리 스타일을 설정할 수 있습니다. 동일한 테두리 스타일 속성에 대해 여러 값을 설정하는 것이 가능하며, 값의 수에 따라 블록의 다른 면에 테두리 스타일이 할당됩니다. 1개, 2개, 3개 또는 4개의 값을 설정할 수 있습니다. 각 경우에 대한 예를 살펴보겠습니다.

하나의 값(단색) - 블록의 모든 면에 테두리 스타일이 설정됩니다.

두 개의 값(솔리드 더블) - 첫 번째 값은 상단과 하단의 스타일을 설정하고 두 번째 값은 측면의 스타일을 설정합니다.

세 가지 값(실선 이중 점선) - 위쪽에 대한 첫 번째 값, 측면에 대한 두 번째 값, 아래쪽에 대한 세 번째 값.

4개의 값(실선 이중 점선 파선) - 위에서부터 시계 방향으로 한 면에 대한 각 값.

테두리 너비 속성입니다. 테두리 두께.

border-width 속성은 요소의 테두리 너비를 설정하는 데 사용됩니다. 테두리 두께는 픽셀과 같은 절대 측정 단위로 지정할 수 있습니다.

border-style 속성과 마찬가지로 속성도 1~4개의 값으로 설정할 수 있습니다. 각 경우에 대한 예를 고려하십시오.

예제 코드:

border-width 속성에 대한 키워드 값도 있습니다. 총 3가지가 있습니다:

• 얇은 - 얇은 테두리;
• 중간 - 중간 두께;
• 두꺼운 - 두꺼운 테두리;

테두리 두께: 얇음.

테두리 두께: 중간.

테두리 두께: 두껍습니다.

테두리 색상 속성입니다. 테두리 색상입니다.

테두리 색상 기능은 테두리 색상을 제어하는 ​​데 사용됩니다. 이 속성의 색상은 CSS의 색상 문서에 설명된 방법, 즉 다음을 사용하여 설정할 수 있습니다.

• 색상의 16진법(#ff00aa)입니다.
• RGB 형식은 rgb(255,12,110) 입니다. CSS3용 RGBA 형식.
• CSS3용 HSL 및 HSLA 형식.
• 색상의 이름(예: 검정(검정))입니다. 색상 이름의 전체 목록은 CSS 색상 이름 표를 참조하세요.

border-color 속성도 1~4개의 값을 가질 수 있으며 이전 속성과 유사하게 처리합니다.

하나의 값(빨간색).

두 가지 값(빨간색 검은색).

세 가지 값(빨간색 검은색 노란색).

네 가지 값(빨간색 검은색 노란색 파란색).

이제 위에서 말한 작업으로 돌아가서 그림을 그려 보겠습니다.

다음은 이러한 모양을 더 크게 그리는 코드입니다.

측면에 대한 설정 값 별도로

위에서 언급했듯이 블록의 한 면에 대해서만 테두리 속성 값을 지정할 수 있습니다. 이러한 목적을 위해 다음과 같은 속성이 있습니다.

• border-top(상단 테두리)
• border-right(오른쪽 테두리)
• border-bottom (하단 테두리)
• 테두리-왼쪽(왼쪽 테두리)

모든 속성에 대해 세 가지 값(두께, 스타일 및 색상)이 순서에 관계없이 지정되었음을 알려드립니다. 그러나 각 면의 두께, 색상 및 스타일을 별도로 설정할 수 있는 속성이 있습니다. 이러한 속성의 작성은 위에서 파생되었습니다.

상단 테두리 옵션(border-top ).

• border-top-color - 요소의 상단 테두리 색상을 설정합니다.
• border-top-width - 요소의 위쪽 테두리 너비를 설정합니다.
• border-top-style - 요소의 상단 테두리 스타일을 설정합니다.

오른쪽 테두리 옵션(border-right ).

• border-right-color - 요소의 오른쪽 테두리 색상을 설정합니다.
• border-right-width - 요소의 오른쪽 테두리 너비를 설정합니다.
• border-right-style - 요소의 오른쪽 테두리 스타일을 설정합니다.

하단 테두리 옵션(border-bottom).

• border-bottom-color - 요소의 하단 테두리 색상을 설정합니다.
• border-bottom-width - 요소의 아래쪽 테두리 너비를 설정합니다.
• border-bottom-style - 요소의 하단 테두리 스타일을 설정합니다.

왼쪽 테두리 옵션(border-left ).

• border-left-color - 요소의 왼쪽 테두리 색상을 설정합니다.
• border-left-width - 요소의 왼쪽 테두리 너비를 설정합니다.
• border-left-style - 요소의 왼쪽 테두리 스타일을 설정합니다.

이러한 속성을 사용하는 예:

border-radius 속성. 테두리의 모서리를 반올림합니다.

border-radius 속성은 요소 테두리의 모서리를 둥글게 하기 위한 것입니다. 이 속성은 CSS3에 도입되었으며 Internet Explorer 8(및 이전 버전)을 제외한 모든 최신 브라우저에서 올바르게 작동합니다.

값은 CSS에서 사용되는 임의의 숫자일 수 있습니다.

속성 테두리 반경: 15px.

블록 프레임이 설정되지 않은 경우 배경과 함께 반올림됩니다. 다음은 테두리가 없지만 배경색이 있는 블록 반올림의 예입니다.

속성 테두리 반경: 15px.

요소의 각 개별 모서리를 둥글게 하는 속성이 있습니다. 이 예에서는 다음을 모두 사용합니다.

경계-상단-좌측 반경: 15px; 테두리-위-오른쪽-반경: 0; 테두리-하단-오른쪽 반경: 15px; 경계-하단-좌측 반경: 0;

속성 테두리 반경: 15px.

이 코드는 하나의 선언으로 작성할 수 있지만 border-radius : 15px 0 15px 0 . 사실 border-radius 속성의 경우 1~4개의 값을 설정할 수 있습니다. 아래 표에는 이러한 선언을 관리하는 규칙이 요약되어 있습니다.

이 표를 주의 깊게 연구하면 원하는 스타일에 대한 가장 짧은 항목이 border-radius : 15px 0 임을 이해할 수 있습니다. 값은 두 개뿐입니다.

약간의 연습

CSS를 사용하여 레몬을 그립니다.

이러한 블록의 코드는 다음과 같습니다.

여백: 0 자동; /* 블록 중앙에 위치 */ 너비: 200px; 높이: 200px; 배경: #F5F240; 테두리: 1px 솔리드 #F0D900; 테두리 반경: 10px 150px 30px 150px;

우리는 이미 그림을 그렸습니다.

이제 삼각형을 남겨 둡니다.

삼각형 코드는 다음과 같습니다.

여백: 0 자동; /* 블록 중앙에 배치 */ padding: 0px; 너비: 0px 높이: 0; 테두리: 30px 단색 흰색; 테두리 바닥 색상: 빨간색;