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로 변경하면 배경이 투명한 것이 더 좋다고 생각합니다. 일반적으로 사용되는 복사 및 붙여넣기를 용이하게 하기 위해 투명한 배경을 위한 테두리 코드는 다음과 같습니다. (상자의 빨간색 부분이 코드입니다)
615b85d0dbaecbb83866f352b102ec35로그 텍스트281edd538493b7474214b4b41eb12eda 코드에서 편집할 필요가 없습니다. 일반 디자인 모드로 돌아가서 생성된 상자를 두 번 클릭하여 텍스트를 편집합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!