corner-bottom-left-shape

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.

Thuộc tính CSS corner-bottom-left-shape chỉ định hình dạng của góc dưới bên trái 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-bottom-left-shape: bevel;
corner-bottom-left-shape: round;

/* superellipse() function values */
corner-bottom-left-shape: superellipse(0.7);
corner-bottom-left-shape: superellipse(-1.9);

/* Global values */
corner-bottom-left-shape: inherit;
corner-bottom-left-shape: initial;
corner-bottom-left-shape: revert;
corner-bottom-left-shape: revert-layer;
corner-bottom-left-shape: unset;

Giá trị

Thuộc tính corner-bottom-left-shape được chỉ định bằng một 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-bottom-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-bottom-left-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 40% 60px 20%, và corner-bottom-left-shape là squircle.

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: goldenrod;
  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 40% 60px 20%;
  corner-bottom-left-shape: squircle;
}

Kết quả

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

Thông số kỹ thuật

Specification
CSS Borders and Box Decorations Module Level 4 # propdef-corner-bottom-left-shape

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

Xem thêm

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

Help improve MDN

Learn how to contribute

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

View this page on GitHub • Report a problem with this content