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-width - border-style (필수)
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>프로그램을 실행해서 사용해 보세요
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 요소의 상단 테두리 너비를 설정합니다.
- 코스 추천
- 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~ 