집 >웹 프론트엔드 >프런트엔드 Q&A >CSS 테두리 색상을 설정하는 방법

CSS 테두리 색상을 설정하는 방법

青灯夜游원래의: 2021-07-14 13:50:002542검색

CSS에서는 border-color, border-top-color, border-bottom-color, border-left-color 및 border-right-color 속성을 사용하여 요소의 테두리 색상을 설정할 수 있습니다.

CSS 테두리 색상을 설정하는 방법

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

css 테두리 색상을 설정하는 속성

Property	Description
border-bottom-color	요소의 하단 테두리 색상을 설정합니다.
border-left-color	요소 아이콘의 왼쪽 테두리 색상을 설정합니다.
border-right-color	요소의 올바른 테두리 색상을 설정하세요.
border-top-color	요소의 상단 테두리 색상을 설정합니다.
border-color	요소의 네 가지 테두리 색상을 설정합니다.

border-color 속성은 하나의 선언에 4가지 테두리 색상을 설정할 수 있는 단축 속성으로, 1~4가지 색상을 설정할 수 있습니다.

이 속성은 요소의 모든 테두리에서 보이는 부분의 색상을 설정하거나 4면에 대해 서로 다른 색상을 설정할 수 있습니다.

예:

border-color:red green blue pink;

위쪽 테두리는 빨간색
오른쪽 테두리는 녹색
아래쪽 테두리는 파란색
왼쪽 테두리는 분홍색

border-color:red green blue;

상단 테두리는 빨간색
오른쪽 및 왼쪽 테두리는 녹색
하단 테두리는 파란색

border-color:dotted red green;

상단 테두리는 빨간색
오른쪽 및 왼쪽 테두리는 녹색

border-color:red;

4개의 테두리가 모두 빨간색입니다

예 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
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>
<p class="one">单色边框！</p>
<p class="two">双色边框！</p>
<p class="three">三色边框！</p>
<p class="four">四色边框！</p>
</body>
</html>

CSS 테두리 색상을 설정하는 방법

예 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.four
{
	border-style:solid;
	border-top-color:#ff0000;
	border-bottom-color:#0000ff;
	border-left-color:rgb(250,0,255);
	border-right-color:#00ff00;
}
</style>
</head>

<body>

<p class="four">四色边框！</p>
</body>
</html>

CSS 테두리 색상을 설정하는 방법

CSS 색상

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

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

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

퓨어 블랙 실버라이트 그레이navy다크 블루블루라이트 블루그린다크 그린 라임라이트 그린teal인디고아쿠아스카이 블루마룬딥 레드레드빅 레드보라색 딥 퍼플fuchsiamagenta올리브갈색노란색 밝은 노란색회색짙은 회색흰색쉘 흰색

不建议在网页中使用颜色名，特别是大规模的使用，避免有些颜色名不被浏览器解析，或者不同浏览器对颜色的解释差异。

2) 使用百分比

这是一种最常用的方法，例如：

color: rgb(100%, 100%, 100%);

这个声明将红、蓝、绿 3 种原色都设置为最大值，结果组合显示为白色。相反，可以设置rgb(0%, 0%, 0%)为黑色。3 个百分值相等将显示灰色，同理哪个百分值大就偏向哪个原色。

3) 使用数值

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

color: rgb(255, 255, 255);

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

4) 十六进制颜色

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

color: #ffffff;

其中要在十六进制前面加一个#颜色符号。上面这个声明将显示白色，相反，可以设置#000000为黑色，用 RGB 来描述：

color: #RRGGBB;

从 0~255，实际上十进制的 255 正好等于十六进制的 FF，一个十六进制的颜色值等于 3 组这样的十六进制的值，它们按顺序连接在一起就等于红、蓝、绿3种原色。

（学习视频分享：css视频教程）

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

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

성명：

이전 기사：CSS는 프로그래밍 언어인가요?다음 기사：CSS는 프로그래밍 언어인가요?