corner-start-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-start-end-shape chỉ định hình dạng của góc block-start và inline-end của một hộp, trong phạm vi vùng border-radius của nó.

Để 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ú pháp

css

/* Keyword values */
corner-start-end-shape: square;
corner-start-end-shape: bevel;

/* superellipse() function values */
corner-start-end-shape: superellipse(1.5);
corner-start-end-shape: superellipse(-2.2);

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

Giá trị

Thuộc tính corner-start-end-shape được chỉ định bằng giá trị <corner-shape-value>.

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

Initial value	`round`
Applies to	all elements. It also applies to `::first-letter`.
Inherited	no
Computed value	The corresponding superellipse() value.
Animation type	Animates as per superellipse interpolation.

Cú pháp hình thức

corner-start-end-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-start-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à 20px 40px 60px 80px, và corner-start-end-shape là notch.

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: 20px 40px 60px 80px;
  corner-start-end-shape: notch;
}

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-start-end-shape

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

Xem thêm

corner-shape shorthand property
corner-start-start-shape, corner-end-start-shape, and corner-end-end-shape
corner-top-left-shape, corner-top-right-shape, corner-bottom-left-shape, and corner-bottom-right-shape
border-radius shorthand property
border-start-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