CSS 테두리 색상을 설정하는 방법-프런트엔드 Q&A-php.cn

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 테두리 색상을 설정하는 방법