Wie kann ich in CSS Teilränder für meine Boxen erstellen?

Teilrahmen für CSS-Boxen deklarieren

Das Erstellen einer CSS-Box mit einem Rahmen, der nur in bestimmten Abschnitten angezeigt wird, kann die visuelle Attraktivität verbessern und den Nutzen erhöhen . Obwohl CSS Teilränder nicht ausdrücklich zulässt, gibt es wirksame Problemumgehungen, um diesen Effekt elegant zu erzielen.

Teilweiser unterer Rand

Für ein Feld, das nur einen Rand anzeigt Wenden Sie unten die folgenden Stile an:

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

Das div-Element erstellt das Hauptfeld, während das Pseudoelement div:after das untere Feld hinzufügt Grenze. Diese Technik funktioniert problemlos und erfordert kein zusätzliches Markup.

Mehrere Teilränder

Um mehrere Teilränder auf demselben Feld zu erstellen, verwenden Sie die Eigenschaft „border-image“ mit ein geschnittenes Bild als Quelle. Dadurch können Sie die Position und die Abmessungen jedes Randsegments angeben:

div {
  width: 350px;
  height: 100px;
  background: url('image.png') no-repeat;
}

div:after {
  content: '';
  width: 350px;
  height: 1px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-image: url('image.png') 60px 350px 5px 60px / 1px 1px;
}

Zusammenfassend lässt sich sagen, dass CSS zwar keine Teilränder nativ unterstützt, diese Techniken jedoch effektive Lösungen bieten, die elegant ablaufen und Flexibilität bei der visuellen Gestaltung bieten ansprechende Kastenrandbehandlungen.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS Teilränder für meine Boxen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!