>  기사  >  웹 프론트엔드  >  div에 테두리 스타일을 추가하기 위한 샘플 코드 공유

div에 테두리 스타일을 추가하기 위한 샘플 코드 공유

黄舟
黄舟원래의
2017-07-19 11:18:555474검색

div에 테두리 스타일을 추가하는 방법은 무엇입니까?

div 상자에 테두리 스타일을 추가하는 것은 매우 쉽습니다. 테두리 플레이트 스타일을 사용하면 됩니다.

1. 점선 및 실선 테두리 - TOP

테두리 점선 스타일: 점선
테두리 구현 스타일: 실선

border:1px dashed #000

은 개체 테두리 너비를 1px로 설정함을 나타냅니다. 검정색 점선 테두리

border:1px solid #000


는 개체 테두리 너비를 1px로 설정함을 나타냅니다. black 테두리 구현

2. div 상단에 테두리 추가 - TOP

div 상단에 1px 검정색 테두리를 추가합니다

div{border-top:1px solid #000}

3. div 하단에 테두리 추가 - TOP

div 상자 하단에 2px 점선 빨간색 테두리 추가

div{border-bottom:2px dashed #F00}

4. div 상자 왼쪽에 테두리 추가 - TOP

CSS 선택기 CSS 이름 ".divcss5"를 지정하고 파란색 1px 추가 상자 왼쪽에 실선 테두리

.divcss5{ border-left:1px solid #00F}

DIV 코드:

<div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div>

5. 상자에 div 추가 오른쪽에 테두리 추가 - TOP

div 오른쪽에 1px 빨간색 실선 테두리 추가 object

div{ border-right:1px solid #F00}

6. 상자 상단과 하단에 테두리 추가 - TOP

상자 상단과 하단에 1픽셀을 추가하여 검은색 테두리 만들기

div{border-top:1px solid #000;border-bottom:1px solid #000}

7. 왼쪽과 오른쪽에 테두리 추가 div 상자 테두리 - TOP

상자 왼쪽과 오른쪽에 2px 점선 녹색 테두리 추가

div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}

8. div의 네 변에 테두리 추가 - TOP

상자의 네 변에 3px 추가 검은색 테두리를 만들기 위한 DIV

div{ border:3px solid #000}

위 내용은 div에 테두리 스타일을 추가하기 위한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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