CSS의 border-top 속성을 사용하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS의 border-top 속성을 사용하는 방법

silencement

May 26, 2019 pm 02:19 PM

CSS의 border-top 속성을 사용하는 방법

border-top 속성 정의 및 사용법

CSS에서 border-top 속성은 요소의 위쪽 테두리에 대한 모든 속성을 하나의 명령문으로 정의하는 데 사용되는 단축 속성입니다. 별도로 설정하려면 요소에 테두리를 표시할 때 CSS의 border-top 속성을 사용하면 됩니다.

border-top 속성으로 정의된 상단 테두리 속성: border-top-width(상단 테두리 너비), border-top-style(상단 테두리 스타일), border-top-color(상단 테두리 색상).

border-top 속성 구문 형식

css 구문: border-top:border-top-width border-top-style border-top-color; (예: border-top:1px solid red;)

JavaScript 구문: style.borderTop="border-top-width border-top-style border-top-color"; (예: style.borderTop="border-top:1px solid red;")

지침

border-top 속성에 설정되지 않은 속성 값이 있습니다. 예: border-top: 단색 빨간색도 괜찮습니다. 단, 상단 테두리 스타일(border-top-style)이 이전에 설정되지 않은 경우 border-top 속성의 두 번째 매개변수도 생략되며 border-top 속성은 적용되지 않습니다. 즉, 테두리 표시 효과를 설정하려면 요소 테두리를 정의해야 합니다(기본 요소 테두리는 투명함). 투명 테두리의 색상이나 너비를 설정하면 표시 효과가 표시되지 않습니다.

border-top 속성 값 설명

border-top-width: 상단 테두리의 너비 설정

border-top-style 상단 테두리의 스타일 설정

border-top-color 색상 설정 the top border

inherit : 상위 요소에서 border-top 속성 값을 상속받습니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css border-top属性设置上边框的显示效果笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c{margin-top:10px;width:300px;}
#a{border-top:1px solid red;}
#b{border-top:solid #FFCCCC;}
#c{border-top:5px solid;}
</style>
</head>
<body>
<div id = "a">border-top:1px solid red;</div>
<div id = "b">border-top:solid #FFCCCC;</div>
<div id = "c">border-top:5px solid;</div>
</body>
</html>

로그인 후 복사

위 내용은 CSS의 border-top 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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