<dashed-function>: hàm tùy chỉnh CSS

Limited availability

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

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Kiểu dữ liệu <dashed-function> trong CSS là một kiểu dữ liệu biểu thị cú pháp dùng để gọi hàm tùy chỉnh CSS, được định nghĩa bằng quy tắc at-rule @function.

Cú pháp

Giá trị <dashed-function> bao gồm --tên-hàm, theo sau là dấu ngoặc đơn chứa các đối số của hàm (ví dụ: --my-function(30px, 3)).

Bạn có thể dùng giá trị <dashed-function> thay cho các giá trị thuộc tính CSS thông thường hoặc các thành phần giá trị thuộc tính, trong trường hợp bạn muốn tính toán động các giá trị dựa trên logic của hàm thay vì cung cấp giá trị tĩnh.

Trong trường hợp bạn muốn truyền các giá trị có dấu phẩy làm đối số, bạn có thể làm điều đó bằng cách bọc chúng trong dấu ngoặc nhọn ({ }).

Ví dụ

Để xem thêm ví dụ, hãy tham khảo hướng dẫn Sử dụng hàm tùy chỉnh CSS của chúng tôi.

Cách dùng cơ bản `<dashed-function>`

Ví dụ này minh họa một hàm cơ bản trả về phiên bản bán trong suốt của màu được truyền vào.

HTML

Phần đánh dấu gồm một phần tử <p> chứa một số nội dung văn bản:

html

<p>Some content</p>

CSS

Trong các kiểu dáng, trước tiên chúng ta định nghĩa hàm tùy chỉnh CSS. Hàm được đặt tên là --transparent và nhận hai tham số: một màu và một giá trị kênh alpha kiểu số. Bên trong thân hàm, chúng ta sử dụng cú pháp màu tương đối để chuyển đổi màu được truyền vào thành màu oklch() với kênh alpha bằng giá trị alpha được truyền vào; đây trở thành result của hàm:

css

@function --transparent(--color <color>, --alpha <number>) {
  result: oklch(from var(--color) l c h / var(--alpha));
}

Tiếp theo, chúng ta định nghĩa một thuộc tính tùy chỉnh --base-color với giá trị #faa6ff trên phần tử :root. Chúng ta gán thuộc tính đó làm giá trị màu border của phần tử <p>, sau đó đặt giá trị background-color của nó bằng phiên bản trong suốt của cùng màu đó. Điều này được thực hiện bằng cách đặt giá trị bằng cú pháp <dashed-function>, chỉ định hàm --transparent() và truyền các đối số var(--base-color) và 0.8.

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    lightgrey 20px 40px
  );
}

css

:root {
  --base-color: #faa6ff;
}

p {
  width: 50%;
  padding: 30px;
  border-radius: 20px;
  border: 3px solid var(--base-color);
  background-color: --transparent(var(--base-color), 0.8);
}