So legen Sie den Div-Grenze im Bootstrap fest

div-Rahmenstil:

Rahmen: 1 Pixel durchgezogen #FF0000;
bedeutet 4 Elemente Alle Seiten sind gerade 1-Pixel-Ränder, rot.
1 Pixel stellt die Rahmenbreite dar, durchgezogen stellt eine gerade Linie dar (gestrichelte Linien können verwendet werden), #FF0000 ist der Farbwert

Mehrere gängige DIV-Rahmenstile, kein Rand, gepunkteter Rand, gestrichelt Linientyp-Ränder, lineare Ränder, Doppellinien-Ränder, gerillte Ränder, geriffelte Ränder, Inline-Effekt-Ränder, hervorstehende Effekt-Ränder usw.

Wenn Sie vier verschiedene Seiten definieren möchten, dann verwenden Sie:
border-top:
border-right:
border-bottom:
border-left:

Div-Rahmenstil-Implementierungscode:

1. Äußerer konvexer Rand:

Effekt:
Protokolltext
Code:

<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>

Codebeschreibung:
Der blaue Teil ist der veränderbare Teil, erklären Sie ihn nacheinander:
Vier 2 stellt die Breite des erhabenen Randes dar. Wenn Sie 1 verwenden, ist dies nicht offensichtlich. Vergleichen Sie 2 oder 3. Geeignet; Die vier Ränder zeigen an, dass der Randtyp „erhöht“ oder „doppelt“ ist für andere Effekte wird unten angegeben;
BREITE: 100 % und HÖHE: 100 % bedeutet, dass die Breite dieses Felds 100 % der Breite des Protokolls ausmacht Die Box wird auch erweitert und verkleinert. Darüber hinaus gibt es eine andere Möglichkeit, sie in Pixeln auszudrücken: WIDTH: 355px bedeutet, dass die Breite der Box 355 Pixel beträgt Sie können sich auf die hier angegebenen Werte beziehen. Ja, aber manchmal müssen Sie Pixel verwenden, um die Größe zu bestimmen =left bedeutet, dass der Inhalt im Feld linksbündig oder rechtsbündig angeordnet ist. Wenn Sie eine Linksbündigkeit wünschen, können Sie align=left löschen ist linksbündig;
ffffff steht für die Hintergrundfarbe im Feld, ffffff steht für Weiß (000000 steht für Schwarz) und der Farbwert kann sich auf diese Tabelle beziehen. Wählen Sie außerdem #ffffff in transprant, um einen transparenten Hintergrund zu erhalten. Persönlich denke ich, dass transparente Hintergründe häufiger verwendet werden; um das Kopieren und Einfügen zu erleichtern, wird der Rahmencode für einen transparenten Hintergrund wie folgt angegeben: (Der rote Teil im Feld ist der Code)

Protokolltext< /DIV> Der Protokolltext ist der Protokollinhalt im Feld. Es ist nicht erforderlich, ihn im normalen Entwurfsmodus zu bearbeiten, und doppelklicken Sie auf das Feld, um den Text zu bearbeiten.

2. Konkaver Rand:

Code:

<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>

Transparenter Hintergrund, konkaver Randcode:

<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>

Transparenter Hintergrund-Doppellinien-Randcode:

<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>

Tatsächlich kann der vordere Rand auch die Farbe wie der Doppellinien-Rand festlegen, aber ich persönlich habe das Gefühl Es ist konkav und konvex. Die Farbe des Effekts sollte besser die Standardeinstellung sein.

4. Gepunkteter Rand:

<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>

Transparenter gepunkteter Hintergrund-Randcode:

<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. Rille mit dreidimensionalem Effekt

<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>

Ich persönlich denke, dass es am besten ist, eine transparente Hintergrundfarbe für diesen Rand zu verwenden, und die Dicke des Randes sollte nicht zu gering sein, sonst wird der Effekt nicht offensichtlich sein

6 dreidimensionaler Effektrand

<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>

Das obige ist der detaillierte Inhalt vonSo legen Sie den Div-Grenze im Bootstrap fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn