CSS에서 테두리 속성을 사용하여 웹 페이지 점선 만들기

이 글에서는 주로 웹 페이지 CSS 제작 시 점선(테두리 속성 사용 방법)을 소개합니다. 필요한 친구들은

여기서 점선 테두리 테두리 제어 점선을 참고하세요. 아래에 구성된 CSS 높이와 CSS 너비는 350픽셀입니다.

1. 네 변은 점선 테두리입니다

border:1px dashed #000; 검은 점선 테두리

예:

CSS 코드:

.hackhome{border:1px dashed #000; height:50px;width:350px}

Html 코드: 내 네 변은 검은 점선 테두리입니다

설명은 다음과 같습니다. 구성 테두리의 약어 핵홈 선택기에는 네 면 모두에 1px의 검은색 점선 테두리가 있습니다

2. 왼쪽 점선:

CSS 코드:

 .hackhome-1{border-left:1px dashed #000; height:50px;width:350px}

Html 코드: 내 왼쪽은 검은색 점선 테두리입니다

여기서는 왼쪽에 검은 점선 테두리를 구성합니다

3. 오른쪽은 점선입니다:

CSS 코드:

 .hackhome-2{border-right:1px dashed #000; height:50px;width:350px}

Html 코드: 나의 오른쪽은 검은 점선 테두리입니다

여기, 오른쪽 검은색 점선 테두리로 구성됩니다

4. 상단 가장자리(상단 가장자리)는 점선입니다:

CSS 코드:

.hackhome-3{border-top:1px dashed #000; height:50px;width:350px}

Html 코드: 상단에 검은색 점선 테두리가 있습니다

여기에서 상단을 구성합니다. 한쪽에 검은 점선 테두리가 있는 가장자리(위쪽 가장자리)

5. 아래쪽 가장자리(아래쪽 가장자리)가 점선으로 표시됨:

CSS 코드:

.hackhome-4{border-bottom:1px dashed #000; height:50px;width:350px}

Html 코드: 아래쪽에 검은색 점선 테두리가 있습니다

여기 한쪽에 검은색 점선 테두리로 밑줄(하단선)을 구성했습니다

6. 한쪽이 점선이 아닌 다른 3면도 점선으로 되어있습니다

오른쪽 테두리는 모서리가 없는 점선, 나머지 3개는 포함되지 않습니다. 측면은 검은색 점선 테두리입니다

CSS 코드:

 .hackhome-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

Html 코드: 내 오른쪽 테두리에는 테두리가 없고 나머지 세 측면은 검은색 점선 테두리입니다.

여기서 개체는 먼저 네 측면 모두에 1px 검정색으로 구성됩니다. , 그리고 테두리의 한쪽을 0으로 설정하는데 이는 3면 테두리의 점선 속성을 설정하는 것과 동일하지만 여기서는 테두리 속성을 설정하는 순서에 주의하세요

위 내용은 본 내용의 전체 내용입니다. 기사, 모든 사람의 학습에 도움이 되기를 바랍니다. 도움말, 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트에 주목하세요!

관련 권장 사항:

CSS 사용 방법 전환 속성은 애니메이션으로 WeChat 애플릿 위젯을 구현합니다.

웹팩이 CSS를 분리하고 별도로 패키징하는 방법

위 내용은 CSS에서 테두리 속성을 사용하여 웹 페이지 점선 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!