부트스트랩에서 div 테두리를 설정하는 방법-부트스트랩 튜토리얼-php.cn

부트스트랩에서 div 테두리를 설정하는 방법

尚

풀어 주다： 2019-07-31 13:14:11

원래의

14724명이 탐색했습니다.

부트스트랩에서 div 테두리를 설정하는 방법

div 테두리 스타일:

border: 1px solid #FF0000;
은 4면 모두 1픽셀 직선 테두리(빨간색)임을 의미합니다.
1px은 테두리 너비를 나타내고, 실선은 직선을 나타냅니다(점선 사용 가능). #FF0000은 색상 값입니다.

몇 가지 일반적인 DIV 테두리 스타일, 테두리 없음, 점선 테두리, 점선 테두리, 직선 테두리, 이중 선 테두리 , 홈이 있는 테두리, 융기선 테두리, 인라인 효과 테두리, 양각 효과 테두리 등

4개의 다른 면을 정의하려면 다음을 사용하세요.
border-top:
border-right:
border-bottom:
border-left:

div 테두리 스타일 구현 코드:

1. 볼록한 테두리:

효과:
로그 텍스트
코드:

<div style="BORDER-RIGHT: 3px outset;
 BORDER-TOP: 3px outset; 
 BACKGROUND: #ffffff; 
 BORDER-LEFT: 3px outset; 
 WIDTH: 100%; 
 BORDER-BOTTOM: 3px outset; 
 HEIGHT: 100%" align=left>日志文字</DIV>

로그인 후 복사

코드 설명:
파란색 부분은 수정 가능한 부분입니다. 하나씩 설명하세요.
4개의 2는 볼록한 테두리의 너비를 나타내며 1을 사용하는 것도 너무 분명히 2개 또는 3개가 더 적합합니다.
4개의 아웃세트는 테두리 유형이 "올려짐"임을 나타냅니다. 삽입 또는 이중으로 변경되면 각각 오목한 테두리와 이중선 테두리 효과가 나타납니다. 다른 효과는 아래에 나와 있습니다.
WIDTH: 100% 및 HEIGHT: 100%는 이 상자의 너비가 로그 너비의 100%를 차지함을 의미합니다. 창이 확장되거나 축소되면 상자의 너비도 확장됩니다. HEIGHT는 높이를 의미하며, 단위는 픽셀로 표현하는 방법도 있습니다. 여기에 주어진 값을 참조할 수 있습니다. 일반적으로 백분율로 표시되지만 때로는 크기를 결정하기 위해 픽셀을 사용해야 하므로 그냥 귀로 재생하세요.
align=left는 내용을 의미합니다. 상자는 왼쪽 정렬 방식으로 정렬됩니다. 왼쪽 정렬을 가운데로 또는 오른쪽 정렬로 각각 변경하면 align=left를 삭제할 수 있습니다.
ffffff는 왼쪽 정렬입니다. 상자 안의 배경색은 ffffff는 흰색(000000은 검정색을 나타냄)을 나타내며, 색상값은 이 표를 참고하여 선택할 수 있습니다. 또한, #ffffff를 transprant로 변경하면 배경이 투명한 것이 더 좋다고 생각합니다. 일반적으로 사용되는 복사 및 붙여넣기를 용이하게 하기 위해 투명한 배경을 위한 테두리 코드는 다음과 같습니다. (상자의 빨간색 부분이 코드입니다)

로그 텍스트 코드에서 편집할 필요가 없습니다. 일반 디자인 모드로 돌아가서 생성된 상자를 두 번 클릭하여 텍스트를 편집합니다.

2. 오목한 테두리:

코드:

<DIV style="BORDER-RIGHT: 3px inset;
BORDER-TOP: 3px inset; 
BACKGROUND: #ffffff; 
BORDER-LEFT: 3px inset; 
WIDTH: 100%; 
BORDER- BOTTOM: 3px inset; 
HEIGHT: 100%" align=left>日志文字</DIV>

로그인 후 복사

투명한 배경의 오목한 테두리 코드:

<DIV style="BORDER- RIGHT: 3px inset; 
BORDER-TOP: 3px inset; 
BACKGROUND: transprant; 
BORDER-LEFT: 3px inset; 
WIDTH: 100%; 
BORDER-BOTTOM: 3px inset; 
HEIGHT: 100%" align=left>日志文字</DIV> 代码

로그인 후 복사

3. 이중선 테두리:

<DIV style="BORDER-RIGHT: 3px double #000000;
 BORDER-TOP: 3px double #000000; 
 BACKGROUND: #ffffff; 
 BORDER-LEFT: 3px double #000000; 
 WIDTH: 100%; 
 BORDER-BOTTOM: 3px double #000000; 
 HEIGHT: 100%" align=left>日志文字</DIV>

로그인 후 복사

투명한 배경 이중선 테두리 코드:

<DIV style="BORDER-RIGHT: 3px double #000000; 
BORDER-TOP: 3px double #000000; 
BACKGROUND: transprant; 
BORDER-LEFT: 3px double #000000; 
WIDTH: 100%; 
BORDER-BOTTOM: 3px double #000000; 
HEIGHT: 100%" align=left>日志文字</DIV>

로그인 후 복사

사실, 앞 테두리 색상도 이중선 테두리처럼 설정할 수 있는데, 개인적으로는 범프 효과는 기본 색상이 더 좋다고 생각합니다.

4. 점선 테두리:

<DIV style="BORDER-RIGHT: 2px dashed #000000; 
BORDER-TOP: 2px dashed #000000; 
BACKGROUND: #ffffff; 
BORDER-LEFT: 2px dashed #000000; 
WIDTH: 100%; 
BORDER-BOTTOM: 2px dashed #000000;
 HEIGHT: 100%" align=left>日志文字</DIV>

로그인 후 복사

투명 배경 점선 테두리 코드:

<DIV style="BORDER-RIGHT: 2px dashed #000000; 
BORDER-TOP: 2px dashed #000000; 
BACKGROUND: transpant; 
BORDER-LEFT: 2px dashed #000000; 
WIDTH: 100%;
 BORDER-BOTTOM: 2px dashed #000000;
  HEIGHT: 100%" align=left>日志文字</DIV>

로그인 후 복사

5. 그루브 입체 효과 테두리

<DIV style="BORDER-RIGHT: 7px groove; 
BORDER-TOP: 7px groove; 
BACKGROUND: transprant; 
BORDER-LEFT: 7px groove; 
WIDTH: 100%; BORDER-BOTTOM: 7px groove; 
HEIGHT: 100%" align=left>日志文字</DIV>

로그인 후 복사

개인적으로 이 테두리의 배경색은 투명하게 사용하는 것이 가장 좋다고 생각합니다. 테두리의 두께가 너무 작으면 효과가 뚜렷하지 않습니다

6. 능선 입체 효과 테두리

<DIV style="BORDER-RIGHT: 7px ridge; 
BORDER-TOP: 7px ridge; BACKGROUND: #ffffff; 
BORDER-LEFT: 7px ridge;
 WIDTH: 100%; 
 BORDER-BOTTOM: 7px ridge; 
 HEIGHT: 100%" align=left>日志文字</DIV>

로그인 후 복사

위 내용은 부트스트랩에서 div 테두리를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!