CSS-Rahmen und Box-Dekorationen

DasCSS-Rahmen- und Box-Dekorationen Modul stellt Eigenschaften zur Verfügung, um Rahmen, geformte Ecken und Box-Schatten zu Elementen hinzuzufügen. Dieses Modul erweitert die Rahmen und Box-Dekorationen, die imCSS-Hintergründe und Rahmen Modul eingeführt wurden, um die Eigenschaftencorner-shape undborder-shape, logischeborder-radius Eigenschaften, Langform-Eigenschaften für diebox-shadow Eigenschaft sowie Eigenschaften zur Erstellung von Teilrahmen.

Rahmen und Box-Dekorationen in Aktion

Wählen Sie einensuperellipse() Wert aus dem Dropdown-Menü, um die Rahmenform zu ändern. Verwenden Sie den Schieberegler, um die Größe der Rahmenabrundung zu ändern. Aktivieren Sie das Kontrollkästchen, um den Box-Schatten ein- und auszublenden.

<p>  <label for="corner-shape-choice"    >Choose a <code>superellipse()</code> value:</label  >  <select>    <option>superellipse(infinity)</option>    <option>superellipse(5)</option>    <option>superellipse(3)</option>    <option>superellipse(2)</option>    <option>superellipse(1.5)</option>    <option>superellipse(1)</option>    <option>superellipse(0.5)</option>    <option>superellipse(0)</option>    <option>superellipse(-0.5)</option>    <option selected>superellipse(-1)</option>    <option>superellipse(-1.5)</option>    <option>superellipse(-2)</option>    <option>superellipse(-3)</option>    <option>superellipse(-5)</option>    <option>superellipse(-infinity)</option>  </select></p><p>  <label for="radius">Choose a <code>border-radius</code> value:</label>  <input    type="range"    step="5"    min="0"    max="100"    value="30"       list="tens" />  <datalist>    <option value="0" label="0"></option>    <option value="20" label="20px"></option>    <option value="40" label="40px"></option>    <option value="60" label="60px"></option>    <option value="80" label="80px"></option>    <option value="100" label="100px"></option>  </datalist></p><p>  <input type="checkbox" />  <label for="check">Toggle the box-shadow</label></p><div></div>

div {  width: 100%;  height: 200px;  background-color: plum;  background-image:    repeating-linear-gradient(transparent 0 19px, #00000022 19px 20px),    repeating-linear-gradient(to left, transparent 0 19px, #00000022 19px 20px);}div {  box-shadow: 3px 3px 5px rgb(0 0 0 / 0.5);  border-radius: 30px;}body:has(input:checked) div {  box-shadow: none;}@layer page-setup {  html {    font-family: "Helvetica", "Arial", sans-serif;  }  body {    max-width: 600px;    min-width: fit-content;    margin: 20px auto;  }  div {    display: flex;    justify-content: center;    align-items: center;    margin-top: 20px;  }  select {    padding: 3px 5px;  }  code {    font-weight: bolder;  }}

const rectangle = document.querySelector("div");const select = document.querySelector("select");const range = document.getElementById("radius");function setCornerShape() {  rectangle.style.cornerShape = select.value;  rectangle.style.borderRadius = `${range.value}px`;  rectangle.innerHTML = `<pre>div {  corner-shape: ${select.value};  border-radius: ${range.value}px;}</pre>`;}select.addEventListener("change", setCornerShape);range.addEventListener("input", setCornerShape);setCornerShape();

Referenz

Eigenschaften

Das CSS-Rahmen- und Box-Dekorationen Modul Level 4 führt auch dieborder-shape,border-limit undborder-clip Eigenschaften ein, zusammen mit denborder-clip-bottom,border-clip-left,border-clip-right,border-clip-top Langform-Eigenschaften. Derzeit unterstützen keine Browser diese Funktionen. Das Modul führt auch Komponenteneigenschaften für die gut unterstütztenborder-radius undbox-shadow Eigenschaften ein, einschließlichborder-block-end-radius,border-block-start-radius,border-bottom-radius,border-inline-end-radius,border-inline-start-radius,border-right-radius,border-top-radius,box-shadow-blur,box-shadow-color,box-shadow-offset,box-shadow-position, undbox-shadow-spread. Diese Komponenteneigenschaften werden ebenfalls noch nicht unterstützt.