CSS 상자 모델 테두리

HTML을 공부한 학생들은 HTML에서 주변 테두리를 만들기 위해 표를 사용하는 경우가 많다는 것을 알고 있지만 CSS 테두리 속성을 사용하면 어떤 요소에도 적용할 수 있는 뛰어난 테두리를 만들 수 있습니다.

각 테두리 속성에서 너비, 스타일, 색상을 설정할 수 있습니다. 테두리 속성을 통해 테두리 너비와 색상을 설정하는 방법을 살펴보겠습니다.

CSS는 세 가지 키워드의 구체적인 세부 사항을 정의하지 않습니다. 따라서 한 사용자 에이전트는 얇은, 중간, 두꺼운을 각각 5px, 3px, 2px로 설정하고 다른 사용자 에이전트는 각각 3px, 2px, 1px로 설정할 수 있습니다.

다음 콘텐츠를 전달할 수 있습니다

td {border-style: solid; border-width: 15px 5px 15px 5px;}

마찬가지로 여기서 단면 테두리의 너비를 설정할 수도 있습니다.

border-top-width
border-right-width
border-bottom-width
border-left-width

이제

 border-style: dashed;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;

<를 추가합니다. CSS 파일에서 🎜>다음은 효과의 스크린샷입니다.

QQ截图20161011155442.png

폭에 대해 이야기한 후 색상을 살펴보겠습니다. . 테두리 색상을 설정하는 것은 매우 간단합니다. CSS는 간단한 border-color 속성을 사용합니다. 이 속성은 한 번에 최대 4개의 색상 값(테두리의 4개 측면에 대해 하나씩)을 허용할 수 있습니다(특정 순서를 직접 시도해 볼 수 있음). 모든 유형의 색상 값을 사용할 수 있습니다. 예를 들어 이름이 지정된 색상이거나 16진수 및 RGB 값일 수 있습니다.

CSS 문서에 다음 콘텐츠를 추가하세요.

  border-color: blue rgb(25%,35%,45%) #909090 red;

다음은 효과 스크린샷:

QQ截图20161011155448.png

속성을 사용하여 각 테두리의 색상을 제어하여 동일한 효과를 얻을 수도 있습니다. 위쪽 색상 테두리 오른쪽 색상 테두리 아래쪽 색상 테두리 왼쪽 색상

지속적인 학습

새로운 파일

<html> <head> <style type="text/css"> p.one { border-style: solid; border-color: #0000ff } p.two { border-style: solid; border-color: #ff0000 #0000ff } p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff } p.four { border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } </style> </head> <body> One-colored border! Two-colored border! Three-colored border! Four-colored border! 注释："border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。 </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear