CSS 테두리
CSS 테두리
CSS 테두리는 요소의 콘텐츠와 패딩을 둘러싸는 하나 이상의 선일 수 있으며 이러한 선의 경우 스타일, 너비 및 색상을 사용자 정의할 수 있습니다. . CSS 테두리 속성을 사용하면 HTML보다 더 나은 효과를 만들 수 있습니다.
CSS 테두리 속성
CSS 테두리 속성을 사용하면 요소 테두리의 스타일과 색상을 지정할 수 있습니다.
테두리 스타일
테두리 스타일 속성은 표시할 테두리 종류를 지정합니다.
border-style 속성은 테두리 스타일을 정의하는 데 사용됩니다.
border-style 값:
none: 기본값은 no입니다. border
dotted: 점선: 점선 프레임 정의
dashed: 점선 프레임 정의
solid: 실선 경계 정의
double: 두 경계선 정의 . 두 테두리의 너비와 border-width 값이 동일합니다
groove: 3D 홈 경계를 정의합니다. 테두리의 색상 값에 따라 효과가 달라집니다.
ridge: 3D 능선 테두리를 정의합니다. 효과는 테두리의 색상 값에 따라 다릅니다.
삽입: 3D 포함 테두리를 정의합니다. 효과는 테두리의 색상 값에 따라 다릅니다.
outset: 3D 돌출 테두리를 정의합니다. 효과는 테두리의 색상 값에 따라 다릅니다
다음을 시도해 보십시오: 테두리 스타일 설정
테두리 너비
border-width 속성은 테두리가 너비를 지정합니다.
테두리 너비를 지정하는 방법에는 두 가지가 있습니다. 2px 또는 0.1em과 같은 길이 값을 지정하거나 가늘게, 중간(기본값), 두꺼운 키워드 중 하나를 사용할 수 있습니다.
참고: CSS는 3개 키워드의 구체적인 너비를 정의하지 않으므로 한 사용자 에이전트는 얇은, 중간, 두꺼운을 각각 5px, 3px, 2px로 설정할 수 있고 다른 사용자 에이전트는 사용자 에이전트 프록시는 각각 3px, 2px 및 1px로 설정됩니다.
테두리 색상
테두리- color 속성이 사용됩니다. 테두리 색상을 설정합니다. 설정할 수 있는 색상:
name - "red"와 같이 색상 이름을 지정합니다.
RGB - RGB 값을 지정합니다. (예: "rgb( 255,0,0)"
Hex - 16진수 값을 지정합니다(예: "#ff0000"
). 테두리를 설정할 수도 있습니다. 색상은 "투명"입니다.
참고: border-color는 단독으로 사용할 때 작동하지 않습니다. 테두리 스타일을 설정하려면 먼저 border-style을 사용해야 합니다.
인스턴스
<!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>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
테두리 - 각 면을 개별적으로 설정
CSS에서는 각 면에 다른 테두리를 지정할 수 있습니다.
예
<!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">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
</body>
</html> 인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
위의 예에서는 단일 속성을 설정할 수도 있습니다.
인스턴스
<!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>2 different border styles.</p>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
border-style 속성은 1-4개의 값을 가질 수 있습니다:
border-style: 점선 이중 점선
상단 테두리 점선
오른쪽 테두리 실선
하단 테두리 이중선
왼쪽 테두리는 점선
border-style: dotted solid double;
상단 테두리 점선
좌우 테두리 실선
하단 테두리는 이중
테두리 스타일: 점선;
위쪽 및 아래쪽 테두리는 점선으로 표시됩니다
오른쪽 및 왼쪽 테두리는 실선으로 표시됩니다
border-style: dotted;
네모난 테두리가 점선으로 되어있습니다
위 예시에서는 테두리 스타일을 사용했습니다. 그러나 border-width 및 border-color와 함께 사용할 수도 있습니다.
테두리 - 단축 속성
위의 예에서는 테두리를 설정하기 위해 많은 속성을 사용합니다.
T 속성에서 테두리를 설정할 수도 있습니다.
"border" 속성에서 설정할 수 있습니다:
border-width
border-style(필수)
border-color
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
border-style:dotted solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>인스턴스 실행 »
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
예제 더보기
인스턴스: 모든 테두리 속성은 명령문에 있습니다
<!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>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
이 예는 단축 속성을 사용하여 동일한 선언에서 네 가지 테두리 속성을 모두 설정하는 방법을 보여줍니다.
예: 아래쪽 테두리 스타일 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
border-style:solid;
border-top:thick double #ff0000;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>인스턴스 실행»
"인스턴스 실행"을 클릭합니다. 온라인 인스턴스 보기 버튼
이 예에서는 하단 테두리 스타일을 설정하는 방법을 보여줍니다.
예: 왼쪽 테두리 너비 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p {border-style:solid;}
p.none {border-bottom-style:none;}
p.dotted {border-bottom-style:dotted;}
p.dashed {border-bottom-style:dashed;}
p.solid {border-bottom-style:solid;}
p.double {border-bottom-style:double;}
p.groove {border-bottom-style:groove;}
p.ridge {border-bottom-style:ridge;}
p.inset {border-bottom-style:inset;}
p.outset {border-bottom-style:outset;}
</style>
</head>
<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
</html>인스턴스 실행»
"인스턴스 실행" 버튼 클릭 온라인 인스턴스를 보려면
이 예에서는 왼쪽 테두리의 너비를 설정하는 방법을 보여줍니다.
예: 네 개의 테두리 색상 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
border-style:solid;
border-left-width:15px;
}
</style>
</head>
<body>
<p><b>注意:</b>"border-left-width" 单独使用没有效果.要先使用 "border-style" 属性设置borders.</p>
</body>
</html>인스턴스 실행»
"인스턴스 실행"을 클릭합니다. 온라인 보기 버튼 예시
이 예에서는 네 개의 테두리 색상을 설정하는 방법을 보여줍니다. 1~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>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
</body>
</html>인스턴스 실행»
"인스턴스 실행" 버튼 클릭 온라인 인스턴스를 보려면
CSS 테두리 속성
| 속성 | 설명 |
|---|---|
| 테두리 | 하나의 명령문에서 네 면에 대한 속성을 설정하는 데 사용되는 단축 속성입니다. |
| 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 | 요소의 상단 테두리 너비를 설정합니다. |
