CSS 테두리
CSS 테두리
요소의 테두리는 요소의 콘텐츠와 패딩을 둘러싸는 하나 이상의 선입니다.
CSS 테두리 속성을 사용하면 요소 테두리의 스타일, 너비, 색상을 지정할 수 있습니다.
CSS 테두리
HTML에서는 표를 사용하여 텍스트 주위에 테두리를 만들지만 CSS 테두리 속성을 사용하면 멋진 테두리를 만들고 적용할 수 있습니다. 어떤 요소에도.
요소의 내부 여백은 요소의 테두리입니다. 요소의 테두리는 요소의 콘텐츠와 내부 테두리를 둘러싸는 하나 이상의 선입니다.
각 테두리에는 너비, 스타일, 색상의 3가지 측면이 있습니다. 다음 페이지에서는 이 세 가지 측면을 자세히 설명하겠습니다.
테두리 및 배경
CSS 사양에 따르면 테두리는 "요소의 배경 위에" 그려집니다. 일부 테두리는 "중단"되고(예: 점선 또는 점선 테두리) 요소의 배경이 테두리의 보이는 부분 사이에 나타나야 하기 때문에 이는 중요합니다.
CSS2에서는 배경이 테두리가 아닌 패딩까지만 확장된다고 명시합니다. 나중에 CSS2.1이 수정되었습니다. 요소의 배경은 콘텐츠, 패딩 및 테두리 영역의 배경입니다. 대부분의 브라우저는 CSS2.1 정의를 따르지만 일부 이전 브라우저는 다르게 동작할 수 있습니다.
테두리 스타일
스타일은 테두리의 가장 중요한 측면인데, 이는 스타일이 테두리의 표시를 제어하기 때문이 아닙니다(물론 스타일은 테두리 표시를 제어하지만 스타일이 없으면 테두리가 전혀 없기 때문입니다.
CSS의 테두리 스타일 속성은 상속되지 않는 스타일을 포함하여 10가지의 서로 다른 스타일을 정의합니다.
예를 들어 이미지의 테두리를 outset으로 정의하여 "볼록한 버튼"처럼 보이도록 할 수 있습니다.
a:link img {border-style: outset }
테두리 스타일 값:
없음: 기본 테두리 없음
dotted: 점선: 점선 프레임 정의
dashed: 점선 상자 정의
solid: 단색 경계 정의
double: 두 개의 경계를 정의합니다. 두 테두리의 너비와 border-width 값이 동일합니다
groove: 3D 홈 경계를 정의합니다. 테두리의 색상 값에 따라 효과가 달라집니다.
ridge: 3D 능선 테두리를 정의합니다. 효과는 테두리의 색상 값에 따라 다릅니다.
삽입: 3D 포함 테두리를 정의합니다. 효과는 테두리의 색상 값에 따라 다릅니다.
outset: 3D 돌출 테두리를 정의합니다. 효과는 테두리의 색상 값에 따라 다릅니다.
여러 스타일 정의
테두리에 대해 여러 스타일을 정의할 수 있습니다. 예를 들면 다음과 같습니다.
p .aside {border-style: solid doted dashed double;}
위 규칙은 클래스 이름이 옆에 있는 단락에 대해 실선 테두리, 점선 오른쪽 테두리 및 점선 아래쪽 테두리의 네 가지 테두리 스타일을 정의합니다. 이중선 왼쪽 테두리.
여기서 값은 오른쪽 위-아래-왼쪽 순서를 채택한다는 것을 다시 확인했습니다. 여러 값으로 서로 다른 패딩을 설정하는 방법을 논의할 때도 이 순서를 보았습니다.
단면 스타일 정의
4면 모두에 테두리 스타일을 설정하는 대신 요소 상자의 한쪽에만 테두리 스타일을 설정하려면 다음 단면 테두리 스타일 속성을 사용할 수 있습니다:
border-top-style
border-right-style
border-bottom-style
border-left- style
따라서 이 두 가지 방법은 동일합니다:
p {border-style: solid solid solid none;}
p {border-style: solid border- left- style: none;}
참고: 두 번째 방법을 사용하려면 약어 속성 뒤에 일방적 속성을 넣어야 합니다. border-style 앞에 단면 속성을 넣으면 축약된 속성 값이 단면 값 none을 덮어쓰게 되기 때문입니다.
테두리 - 약어 속성
위의 예에서는 테두리를 설정하기 위해 많은 속성을 사용합니다.
T 속성에서 테두리를 설정할 수도 있습니다.
"border" 속성에서 설정할 수 있습니다:
border-width
border-style(필수)
border-color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p
{
border:5px solid orange;
}
</style>
</head>
<body>
<p>段落文字部分</p>
</body>
</html> CSS 프레임 속성
속성 설명
테두리 약어 속성. 선언 하나.
border-bottom-style 요소의 하단 테두리 스타일을 설정합니다.
border-bottom-width 요소의 하단 테두리 너비를 설정합니다.
![프론트엔드 Vue3 실전 전투 [손글씨 vue 프로젝트]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST 튜토리얼 [네트워크 통신 관련 기술 개념의 대중화]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
