ellipse()

Try it

clip-path: ellipse(20px 50px);

clip-path: ellipse(4rem 50% at right center);

clip-path: ellipse(closest-side closest-side at 5rem 6rem);

clip-path: ellipse(closest-side farthest-side);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

Cú pháp

shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);

Hình elip về bản chất là một hình tròn bị dẹt, vì vậy ellipse() hoạt động rất giống circle() ngoại trừ việc chúng ta phải chỉ định hai bán kính x và y.

Giá trị

<shape-radius>

Hai bán kính, x và y theo thứ tự đó. Có thể là một <length>, <percentage>, hoặc các giá trị closest-side và farthest-side.

closest-side

Sử dụng khoảng cách từ tâm hình dạng đến cạnh gần nhất của hộp tham chiếu. Đối với hình elip, đây là cạnh gần nhất theo chiều bán kính.

farthest-side

Sử dụng khoảng cách từ tâm hình dạng đến cạnh xa nhất của hộp tham chiếu. Đối với hình elip, đây là cạnh xa nhất theo chiều bán kính.

<position>

Di chuyển tâm của hình elip. Có thể là một <length>, <percentage>, hoặc các giá trị như left. Giá trị <position> mặc định là center nếu bị bỏ qua.

Cú pháp chính thức

<ellipse()> = 
  ellipse( <radial-size>? [ at <position> ]? )  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

Ví dụ

Ví dụ ellipse() cơ bản

Ví dụ này cho thấy một hình elip nổi trái với bán kính ngang 40%, bán kính dọc 50%, và vị trí left. Điều này có nghĩa là tâm của hình elip nằm ở cạnh trái của hộp, tạo ra hình nửa elip để văn bản bao xung quanh. Nhấn "Play" trong các khối mã để thay đổi các giá trị này và xem hình elip thay đổi như thế nào:

<div class="box">
  <div class="shape"></div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.shape {
  float: left;
  shape-outside: ellipse(40% 50% at left);
  margin: 20px;
  width: 100px;
  height: 200px;
}

Sử dụng giá trị closest-side / farthest-side

Các giá trị từ khóa closest-side và farthest-side hữu ích để tạo nhanh một hình elip dựa trên kích thước của hộp tham chiếu phần tử nổi.

<div class="box">
  <div class="shape"></div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.shape {
  float: left;
  shape-outside: ellipse(closest-side farthest-side at 30%);
  margin: 20px;
  width: 100px;
  height: 140px;
}

Thông số kỹ thuật

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

Xem thêm

• Các thuộc tính sử dụng kiểu dữ liệu này: clip-path, shape-outside
• Hướng dẫn về Basic Shapes