circle()

Try it

clip-path: circle(50px);

clip-path: circle(6rem at right center);

clip-path: circle(10% at 2rem 90%);

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

clip-path: circle(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: circle(50%);
clip-path: circle(6rem at 12rem 8rem);

Giá trị

<shape-radius>

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 tròn, đây là cạnh gần nhất theo bất kỳ chiều nào.

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 tròn, đây là cạnh xa nhất theo bất kỳ chiều nào.

<position>

Di chuyển tâm của hình tròn. 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

<circle()> = 
  circle( <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ụ

Hình tròn cơ bản

Trong ví dụ bên dưới, thuộc tính shape-outside có giá trị circle(50%), định nghĩa một hình tròn trên phần tử float để văn bản bao quanh nó.

<div class="box">
  <img
    alt="A hot air balloon"
    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
  <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;
}
img {
  float: left;
  shape-outside: circle(50%);
}

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