html div의 테두리 선을 설정하는 방법-프런트엔드 Q&A-php.cn

html div의 테두리 선을 설정하는 방법

青灯夜游

풀어 주다： 2023-01-03 09:28:35

원래의

20120명이 탐색했습니다.

html div 요소 테두리 선은 테두리 관련 속성을 사용하여 설정할 수 있습니다. 1. 테두리 속성은 위쪽, 아래쪽, 왼쪽 및 오른쪽 테두리 스타일을 동시에 설정합니다. 2. 테두리-상단, 테두리-하단, 테두리-왼쪽 및 border-right 속성은 각각 위쪽, 아래쪽, 왼쪽 및 오른쪽 테두리 스타일을 설정합니다.

html div의 테두리 선을 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

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

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				width: 250px;
				margin: 50px 0px;
				padding: 20px 10px;
			}
			.box1{
				border: 1px solid red;
			}
			.box2{
				border-top: 1px solid green;
			}
			.box3{
				border-bottom: 1px solid green;
			}
			.box4{
				border-left: 1px solid green;
			}
			.box5{
				border-right: 1px solid green;
			}

		</style>
	</head>

	<body>
		<div class="box1">border属性设置使用边框样式</div>
		<div class="box2">border-top属性设置上边框样式</div>
		<div class="box3">border-bottom属性设置下边框样式</div>
		<div class="box4">border-left属性设置左边框样式</div>
		<div class="box5">border-right属性设置右边框样式</div>
	</body>

</html>

로그인 후 복사

렌더링:

html div의 테두리 선을 설정하는 방법

[추천 튜토리얼: CSS 비디오 튜토리얼, html 비디오 튜토리얼]

CSS 테두리 속성

속성	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	요소의 상단 테두리 너비를 설정합니다.