CSS borders and box decorations

Module CSS borders and box decorations cung cấp các thuộc tính để thêm border, góc bo tròn và box shadow cho các phần tử. Module này mở rộng border và box decoration được giới thiệu trong module CSS backgrounds and borders, bổ sung các thuộc tính corner-shape và border-shape, các thuộc tính border-radius theo hướng logic, các thuộc tính longhand cho thuộc tính box-shadow, và các thuộc tính để tạo border một phần.

Borders và box decorations thực tế

Chọn giá trị superellipse() từ menu thả xuống để thay đổi hình dạng border. Dùng thanh trượt để thay đổi kích thước border radius. Bật/tắt hộp kiểm để ẩn và hiện box shadow.

<p>
  <label for="corner-shape-choice"
    >Choose a <code>superellipse()</code> value:</label
  >
  <select id="corner-shape-choice">
    <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"
    id="radius"
    list="tens" />
  <datalist id="tens">
    <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" id="check" />
  <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();

Tham chiếu

Thuộc tính

Module CSS borders and box decorations cấp độ 4 cũng giới thiệu các thuộc tính border-shape, border-limit và border-clip, cùng với các thuộc tính longhand border-clip-bottom, border-clip-left, border-clip-right, border-clip-top. Hiện tại chưa có trình duyệt nào hỗ trợ các tính năng này. Module cũng giới thiệu các thuộc tính thành phần cho border-radius và box-shadow vốn đã được hỗ trợ rộng rãi, bao gồm border-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 và box-shadow-spread. Các thuộc tính thành phần này cũng chưa được hỗ trợ.