corner-block-end-shape

Khả dụng hạn chế

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.

Thuộc tính CSS corner-block-end-shape chỉ định hình dạng của cả hai góc ở cạnh block-end của một hộp, trong phạm vi vùng border-radius của chúng.

Để có mô tả đầy đủ về hành vi hình dạng góc và nhiều ví dụ, xem trang thuộc tính viết tắt corner-shape.

Các thuộc tính thành phần

Thuộc tính corner-block-end-shape là dạng viết tắt của các thuộc tính logic sau:

Cú pháp

css

/* Single keyword value set for both corners */
corner-block-end-shape: square;
corner-block-end-shape: scoop;

/* Single superellipse() value set for both corners */
corner-block-end-shape: superellipse(3.5);
corner-block-end-shape: superellipse(-1.9);

/* Block-end/inline-start corner, block-end/inline-end corner */
corner-block-end-shape: square scoop;
corner-block-end-shape: square superellipse(-1.9);

/* Global values */
corner-block-end-shape: inherit;
corner-block-end-shape: initial;
corner-block-end-shape: revert;
corner-block-end-shape: revert-layer;
corner-block-end-shape: unset;

Giá trị

Thuộc tính corner-block-end-shape được chỉ định bằng một hoặc hai giá trị <corner-shape-value>}:

Nếu một giá trị được sử dụng, nó chỉ định hình dạng của cả hai góc block-end.
Nếu hai giá trị được sử dụng, giá trị đầu tiên chỉ định hình dạng của góc block-end/inline-start, và giá trị thứ hai chỉ định hình dạng của góc block-end/inline-end.

Định nghĩa hình thức

Initial value	as each of the properties of the shorthand: `corner-end-start-shape`: `round` `corner-end-end-shape`: `round`
Applies to	all elements. It also applies to `::first-letter`.
Inherited	no
Computed value	as each of the properties of the shorthand: `corner-end-start-shape`: The corresponding superellipse() value. `corner-end-end-shape`: The corresponding superellipse() value.
Animation type	as each of the properties of the shorthand: `corner-end-start-shape`: Animates as per superellipse interpolation. `corner-end-end-shape`: Animates as per superellipse interpolation.

Cú pháp hình thức

corner-block-end-shape = 
  <'corner-top-left-shape'>{1,2}  

<corner-top-left-shape> = 
  <corner-shape-value>  

<corner-shape-value> = 
  round             |
  scoop             |
  bevel             |
  notch             |
  square            |
  squircle          |
  <superellipse()>  

<superellipse()> = 
  superellipse( <number>  |
  infinity                |
  -infinity )

Ví dụ

Bạn có thể tìm các ví dụ liên quan khác trên trang tham chiếu corner-shape.

Cách dùng cơ bản của `corner-block-end-shape`

HTML

Mã đánh dấu cho ví dụ này chứa một phần tử <div> duy nhất.

html

<div></div>

CSS

Chúng ta cho hộp một số kiểu dáng cơ bản, được ẩn để ngắn gọn. Chúng ta cũng áp dụng box-shadow, border-radius là 80px / 40px, và corner-block-end-shape là notch square.

body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: cyan;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

css

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 80px / 40px;
  corner-block-end-shape: notch square;
}

Kết quả

Kết quả hiển thị như sau:

Thông số kỹ thuật

Thông số kỹ thuật
CSS Borders and Box Decorations Module Level 4 # propdef-corner-block-end-shape

Khả năng tương thích trình duyệt

Xem thêm

corner-shape shorthand property
corner-block-start-shape, corner-inline-start-shape, and corner-inline-end-shape
corner-top-shape, corner-bottom-shape, corner-left-shape, and corner-right-shape
border-radius shorthand property
border-end-start-radius and border-end-end-radius
CSS borders and box decorations module
CSS backgrounds and borders module

Help improve MDN

Tìm hiểu cách đóng góp

This page was last modified on Jan 1, 1970 by MDN contributors.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này