CSS에서 4가지 테두리 색상을 다르게 설정하는 방법

CSS에서는 border-top-color, border-bottom-color, border-left-color, border-right-color 속성을 사용하여 위쪽 테두리, 아래쪽 테두리, 왼쪽 테두리 및 테두리의 색상을 설정할 수 있습니다. 각각 오른쪽 테두리.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css는 서로 다른 색상으로 4개의 테두리를 설정합니다

실행 효과:

설명:

• border-top-color 속성은 위쪽 테두리 색상을 설정할 수 있습니다.

• border -bottom-color 속성은 아래쪽 테두리 색상을 설정할 수 있습니다

• border-left-color 속성은 왼쪽 테두리 색상을 설정할 수 있습니다

• border-right-color 속성은 오른쪽 테두리 색상을 설정할 수 있습니다

CSS color

CSS에서 색상 값은 색상 이름, 백분율, 숫자, 16진수 값을 사용하는 방법이 있습니다.

1) 색상 이름을 사용하세요

현재 약 184개의 색상 이름이 있지만 다양한 브라우저에서 실제로 지원되며 CSS 사양으로 권장되는 색상 이름은 아래 표와 같이 16개뿐입니다.

퓨어 블랙 실버라이트 그레이navy다크 블루블루라이트 블루그린다크 그린 라임라이트 그린teal인디고아쿠아스카이 블루마룬딥 레드레드빅 레드보라색 딥 퍼플fuchsiamagenta올리브갈색노란색 밝은 노란색회색짙은 회색흰색쉘 흰색가장 일반적인 방법은 다음과 같습니다. 예: 이 명령문은 빨간색, 파란색, 녹색의 세 가지 기본 색상을 최대값으로 설정하고 결과 조합은 다음과 같이 표시됩니다. 하얀색. 대신 rgb(0%, 0%, 0%)를 검정색으로 설정하세요. 세 가지 백분율 값이 동일하면 회색이 표시됩니다. 마찬가지로 백분율 값이 클수록 기본 색상이 선호됩니다. 숫자 범위는 0~255입니다. 예:

color: rgb(255, 255, 255);

위 명령문은 흰색으로 표시되지만 반대로 rgb(0, 0)으로 설정할 수 있습니다. , 0)는 검은색으로 표시됩니다. 세 값이 동일하면 표시는 회색으로 표시됩니다. 마찬가지로 값이 클수록 기본 색상의 비율이 높아집니다.

표 1: CSS 사양에서 권장하는 색상 이름

					색상 이름을 사용하지 않는 것이 좋습니다. 일부 색상 이름이 브라우저에서 구문 분석되지 않거나 다르게 표시되는 것을 방지하기 위해 웹 페이지, 특히 대규모 사용. 장치에서 색상을 해석하는 방식의 차이.
2) 백분율 사용		color: rgb(100%, 100%, 100%);		3) 숫자 값 사용 ​​

4) 16진수 색상

가장 일반적으로 사용되는 색상 선택 방법입니다. 예:

color: #ffffff;

여기서 16진수 앞에 # 색상 기호를 추가해야 합니다. 위 명령문은 흰색으로 표시됩니다. 반대로 #000000를 RGB로 설명하는 검정색으로 설정할 수 있습니다.

color: #RRGGBB;

from 0~255, 실제로 십진수 255는 FF와 정확히 같습니다. 16진수, 16진수 색상 값은 이러한 16진수 값의 3개 그룹과 동일하며, 이를 순서대로 연결하면 빨간색, 파란색, 녹색의 3원색과 같습니다.

rgb(0%, 0%, 0%)为黑色。3 个百分值相等将显示灰色，同理哪个百分值大就偏向哪个原色。

3) 使用数值

数字范围从 0~255，例如：

rrreee

上面这个声明将显示白色，相反，可以设置为rgb(0, 0, 0)，将显示黑色。3 个数值相等将显示灰色，同理哪个数值大哪个原色的比重就会加大。

4) 十六进制颜色

这是最常用的取色方法，例如：

rrreee

其中要在十六进制前面加一个#颜色符号。上面这个声明将显示白色，相反，可以设置#000000(학습 영상 공유:

css 영상 튜토리얼

)

위 내용은 CSS에서 4가지 테두리 색상을 다르게 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!