新疆生产建设兵团党委原常委宋志国被开除党籍

Limited availability
百度 杭州玉泉派出所瞿警官：“打电话报警的男子，其实就是动手打人的男子。

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die xywh() CSS Funktion erstellt ein Rechteck, indem sie die angegebenen Abst?nde von den linken (x) und oberen (y) Kanten des umgebenden Blocks und die angegebene Breite (w) und H?he (h) des Rechtecks verwendet. Es ist eine grundlegende Formfunktion des <basic-shape> Datentyps. Sie k?nnen die xywh()-Funktion in CSS-Eigenschaften wie offset-path verwenden, um den rechteckigen Pfad zu erstellen, entlang dem sich ein Element bewegt, und in clip-path, um die Form des Ausschnittbereichs zu definieren.

Syntax

css
offset-path: xywh(0 1% 2px 3% round 0 1px 2% 3px);
clip-path: xywh(1px 2% 3px 4em round 0 1% 2px 3em);

Werte

<length-percentage>

Gibt die <length-percentage>-Werte für die x- und y-Koordinaten des Rechtecks an.

<length-percentage [0,∞]>

Gibt nicht negative <length-percentage>-Werte für die Breite und H?he des Rechtecks an. Der Mindestwert kann null sein, und der H?chstwert hat kein Limit.

round <'border-radius'>

Gibt den Radius der abgerundeten Ecken des Rechtecks mit derselben Syntax wie die CSS-border-radius-Shorthand-Eigenschaft an. Dieser Parameter ist optional.

Formale Syntax

<xywh()> = 
  xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )  

<length-percentage> = 
  <length>      |
  <percentage>  

<border-radius> = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

Beispiele

Erstellen eines offset-paths mit xywh()

Im folgenden Beispiel verwendet die offset-path-Eigenschaft die xywh()-Funktion, um die Form des Pfades zu definieren, auf dem sich das Element, in diesem Fall ein magentafarbener Kasten, bewegt. Es werden zwei verschiedene Szenarien gezeigt, jedes mit unterschiedlichen Werten für die xywh()-Funktion. Der Pfeil innerhalb der K?sten zeigt auf den rechten Rand des Kastens.

html
<div class="container">
  Rectangular path 1
  <div class="path xywh-path-1">→</div>
</div>
<div class="container">
  Rectangular path 2
  <div class="path xywh-path-2">→</div>
</div>
css
.container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 30px;
  text-align: center;
}

.path {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: magenta;
  animation: move 10s linear infinite;
}

.xywh-path-1 {
  offset-path: xywh(20px 20px 100% 100% round 10%);
}

.xywh-path-2 {
  offset-path: xywh(20px 30% 150% 200%);
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

Ergebnis

  • Das Rechteck des Pfades 1 ist um 20px von den linken und oberen Kanten des umgebenden Blocks versetzt. Dieses Pfad-Rechteck hat die gleichen Abmessungen wie der umgebende Block, das hei?t, die Breite betr?gt 100% der Breite des umgebenden Blocks und die H?he 100% der H?he des umgebenden Blocks. Beachten Sie, wie der Pfeil innerhalb des Kastens der 10% Kurve (definiert durch round 10%) an den Ecken des rechteckigen Pfads folgt.
  • Da das obere Limit sowohl für Breite als auch für H?he in xywh() unendlich ist, führt die Einstellung der H?he auf 200% im Pfad 2-Rechteck dazu, dass das erzeugte Rechteck doppelt so hoch wie der umgebende Block ist. Beachten Sie, wie sich der Pfeil innerhalb des Kastens an den Ecken verh?lt, wenn round <'border-radius'> nicht angegeben ist.

Spezifikationen

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-xywh

Browser-Kompatibilit?t

Siehe auch