border-bottom(하단 테두리의 스타일, 너비 및 색상 지정)

테두리 하단: 값

테두리 하단 스타일:값;

테두리-하단-색상: 값;

테두리 하단 너비: 값;

예:

테두리 하단: 단색 1px #ffff00;

테두리 하단 스타일: 오프셋;

테두리 하단 색상: #0000ff;

테두리 하단 너비:15px;

border-bottom 속성은 하단 테두리의 스타일, 너비, 색상을 지정하는 데 사용되며 값은 반너비 공백으로 구분되며 순서는 없습니다.

border-bottom 속성의 스타일 값에 대한 자세한 내용은 Edge 스타일을 참고해주세요. 모서리 너비 값입니다. 자세한 내용은 모서리 너비를 참조하세요.

최종선의 스타일, 너비, 색상을 지정할 때 다음 속성을 사용하세요.

border-bottom-color: 하단 라인의 색상
border-bottom-style: 밑줄의 스타일
border-bottom-width: 하단 테두리의 너비

지정

border-bottom 값과 설명

속성

값

설명

테두리 하단

단단함

border-bottom的值及其说明
属性	值	说明
border-bottom	solid	下边线为实线其他的值还有：groove、dotted等，详细请参照边线样式。
	1px	下边线的宽度使用数值可以表示边线的任意宽度，数值单位除了px，还有em、ex，详细请参照数值+单位使用关键词指定 thin(细)、medium(普通)、thick(粗)
	#ff0000	下边线的颜色除了使用颜色代码表示具体颜色之外，边线还可以指定为透明即：transparent

하단 모서리는 실선입니다.
그 외 값으로는 홈, 점선 등이 있습니다. 자세한 내용은 모서리 스타일을 참고하세요.

1px

하단 가장자리의 너비
숫자 값을 사용하여 가장자리의 너비를 나타냅니다. 숫자 단위에는 px 외에도 em 및 ex도 포함됩니다. 숫자값 + 단위
키워드를 사용하여
얇음(가늘게), 중간(보통), 두껍게(거칠게)

#ff0000

하단 가장자리 색상
특정 색상을 나타내는 색상 코드를 사용하는 것 외에도 가장자리를 투명:투명으로 지정할 수도 있습니다

예

css 파일

.sample1,.sample2,.sample3{

margin:0.5em;

padding:2px;

}

.sample1 {border-bottom: solid 1px #ffff00;}

.sample2 {border-bottom: groove 10px #00ff00;}

.sample3 {border-bottom-style: ridge;

border-bottom-color: #0000ff;

border-bottom-width:15px;

}

로그인 후 복사

위 CSS 파일에 링크된 HTML 파일

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1">

<link href="material/border-bottom.css" rel="stylesheet" type="text/css" />

<title>border-bottom属性（http://wwww.manongjc.com）</title>

</head>

<body>

<div class="sample1">sample1：下边线 solid 1px #ffff00</div>

<div class="sample2">sample2：下边线 groove 10px #00ff00</div>

<div class="sample3">sample3：分别指定下边线的样式、宽度、颜色 </div>

</body>

</html>

로그인 후 복사

참고자료 : http://www.manongjc.com/article/1190.html