>웹 프론트엔드 >HTML 튜토리얼 >HTML에서 테두리를 설정하는 방법

HTML에서 테두리를 설정하는 방법

藏色散人
藏色散人원래의
2021-04-01 11:11:2381205검색

HTML에서 테두리를 설정하는 방법: 1. "border-width" 속성을 통해 테두리 너비를 설정합니다. 2. "border-style" 속성을 통해 테두리 스타일을 설정합니다. 3. "border"를 통해 테두리 색상을 설정합니다. -색상" 속성입니다.

HTML에서 테두리를 설정하는 방법

이 기사의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

HTML 요소에 대한 테두리 설정

속성: border, 요소에 대해 4개의 테두리를 설정할 수 있습니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽(순서는 매우 중요합니다)

세 가지 값이 있습니다:

1.border-width: 테두리 너비, 기본값 3px, 수동으로 설정할 수 있으며 픽셀 값을 사용합니다.

2.border- 스타일: 테두리 스타일, 필수입니다. 바람직함: 실선(실선 테두리) 점선(점선 테두리) 점선(점선 테두리) 이중(이중 테두리)

3.border-color: 테두리 색상, 색상 값을 가져오며 기본값은 검정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
        h1{
            width:300px;
            height:150px;
        }
        .c1{
            /*边框宽度与颜色有默认值,样式必须设置*/
 border:solid;
        }
        .c2{
            border:5px solid red;
        }
        .c3{
            border:5px dashed green;
        }
        .c4{
            border:5px dotted blue;
        }
        .c5{
            border:5px double orange;
        }
    </style>
</head>
<body>
<h1 class="c1"></h1>
<h1 class="c2"></h1>
<h1 class="c3"></h1>
<h1 class="c4"></h1>
<h1 class="c5"></h1>
</body>
</html>

효과는 다음과 같습니다. :

HTML에서 테두리를 설정하는 방법

추천 학습: "HTML 비디오 튜토리얼" "css 비디오 튜토리얼"

위 내용은 HTML에서 테두리를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.