CSS 테두리

CSS 테두리

CSS 테두리 속성

CSS 테두리 속성을 사용하면 요소 테두리의 스타일과 색상을 지정할 수 있습니다.

테두리 스타일

테두리 스타일 속성은 표시할 테두리 종류를 지정합니다.

border-style 속성은 테두리 스타일을 정의하는 데 사용됩니다.

border-style 값:

none: 기본적으로 테두리 없음
dotted: 점선 프레임 정의
점선: 점선 상자 정의
solid: 단색 경계 정의
double: 두 개의 경계를 정의합니다. 두 테두리의 너비와 border-width 값이 동일합니다.
groove: 3D 홈 경계를 정의합니다. 테두리의 색상 값에 따라 효과가 달라집니다.
ridge: 3D 능선 테두리를 정의합니다. 효과는 테두리의 색상 값에 따라 다릅니다.
inset: 3D 포함 테두리를 정의합니다. 효과는 테두리의 색상 값에 따라 다릅니다.
outset: 3D 돌출 테두리를 정의합니다. 테두리 색상값에 따라 효과가 달라집니다

Instance

       <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>

프로그램을 실행해서 사용해 보세요

테두리 너비

border-width 속성을 통해 테두리 너비를 지정할 수 있습니다.

테두리 너비를 지정하는 방법에는 두 가지가 있습니다. 2px 또는 0.1em과 같은 길이 값을 지정하거나 가늘게, 중간(기본값), 두껍게 하는 3가지 키워드 중 하나를 사용할 수 있습니다.

참고: CSS는 3개 키워드의 특정 너비를 정의하지 않으므로 한 사용자 에이전트는 얇은, 중간, 두꺼운을 각각 5px, 3px, 2px로 설정하고 다른 사용자 에이전트는 3px, 2px로 설정할 수 있습니다. 각각 1px입니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.one 
{
	border-style:solid;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}
</style>
</head>

<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
</body>

</html>

Note: "border-width" 속성은 단독으로 사용되는 경우 효과가 없습니다. 먼저 "border-style" 속성을 사용하여 테두리를 설정해야 합니다.

프로그램을 실행해서 사용해 보세요

테두리 색상

border-color 속성은 테두리 색상을 설정하는 데 사용됩니다. 설정할 수 있는 색상:

name - "red"와 같은 색상 이름 지정

RGB - "rgb(255,0,0)"와 같은 RGB 값 지정

Hex - 16진수 지정 "# ff0000"

테두리 색상을 "투명"으로 설정할 수도 있습니다.

Note: border-color는 단독으로 사용될 때 작동하지 않습니다. Border-style을 사용하여 테두리 스타일을 먼저 설정해야 합니다.

예

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p.one
        {
            border-style:solid;
            border-color:red;
        }
        p.two
        {
            border-style:solid;
            border-color:#98bf21;
        }
    </style>
</head>

<body>
<p class="one">山河拱手，为君一笑 。</p>
<p class="two">如是颠簸生世亦无悔。</p>
</body>
</html>

프로그램을 실행하고 사용해 보세요

Border - 각 면을 개별적으로 설정합니다

CSS에서는 각 면에 대해 서로 다른 테두리를 지정할 수 있습니다.

예

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            border-top-style:dotted;
            border-right-style:solid;
            border-bottom-style:dotted;
            border-left-style:solid;
        }
    </style>
</head>

<body>
<p>两个不同的边界样式。</p>
</body>
</html>

프로그램을 실행하고 사용해 보세요

border-style 속성은 1~4개의 값을 가질 수 있습니다.

border-style: 점선 이중 점선;

상단 테두리는 점선입니다
The 오른쪽 테두리는 실선
하단 테두리는 이중 테두리
왼쪽 테두리는 점선
ㅋㅋㅋ

border-style: 점선 실선;

상단 및 하단 테두리는 점선입니다.
오른쪽 및 왼쪽 테두리는 실선입니다.

테두리 스타일 : 점선;

모든 면의 테두리가 점선으로 되어있습니다
위 예시에서는 테두리 스타일을 사용했습니다. 그러나 border-width 및 border-color와 함께 사용할 수도 있습니다.

Border - 단축 속성

위의 예에서는 테두리를 설정하기 위해 많은 속성을 사용합니다.

T 속성에서 테두리를 설정할 수도 있습니다.
"테두리" 속성에서 설정할 수 있습니다:

border-color

인스턴스

       <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p
{
	border:5px solid red;
}
</style>
</head>

<body>
<p>段落中的一些文本。</p>
</body>
</html>

달려 프로그램 사용해 보세요

예제 더 보기

4개의 테두리 색상 설정

      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<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">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
</body>
</html>

CSS 테두리 속성

Attribute	Description
border	약어 속성, 하나의 명령문에서 네 면에 대한 속성을 설정하는 데 사용됩니다.
border-style	은 요소의 모든 테두리 스타일을 설정하거나 각 측면의 테두리 스타일을 개별적으로 설정하는 데 사용됩니다.
border-width	요소의 모든 테두리 너비를 설정하거나 각 테두리의 너비를 개별적으로 설정하는 데 사용되는 단축 속성입니다.
border-color	약식 속성으로, 요소의 모든 테두리에서 보이는 부분의 색상을 설정하거나 4개 면 각각의 색상을 설정합니다.
border-bottom	약어 속성, 하단 테두리의 모든 속성을 하나의 명령문으로 설정하는 데 사용됩니다.
border-bottom-color	요소의 아래쪽 테두리 색상을 설정합니다.
border-bottom-style	요소의 하단 테두리 스타일을 설정합니다.
border-bottom-width	요소의 하단 테두리 너비를 설정합니다.
border-left	약어 속성, 왼쪽 테두리의 모든 속성을 하나의 명령문으로 설정하는 데 사용됩니다.
border-left-color	요소의 왼쪽 테두리 색상을 설정합니다.
border-left-style	요소의 왼쪽 테두리 스타일을 설정합니다.
border-left-width	요소의 왼쪽 테두리 너비를 설정합니다.
border-right	약어 속성, 오른쪽 테두리의 모든 속성을 하나의 명령문으로 설정하는 데 사용됩니다.
border-right-color	요소의 오른쪽 테두리 색상을 설정합니다.
border-right-style	요소의 오른쪽 테두리 스타일을 설정합니다.
border-right-width	요소의 오른쪽 테두리 너비를 설정합니다.
border-top	약어 속성, 상단 테두리의 모든 속성을 하나의 명령문으로 설정하는 데 사용됩니다.
border-top-color	요소의 상단 테두리 색상을 설정합니다.
border-top-style	요소의 상단 테두리 스타일을 설정합니다.
border-top-width	요소의 상단 테두리 너비를 설정합니다.

지속적인 학습

||

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } </style> </head> <body> <p>两个不同的边界样式。</p> </body> </html>

제출하다 코드 재설정
자동운전