CSS circle() 函数

صفحه قبل هائیسیسس کالک آتتربیتو
صفحه بعدی هائیسیسس کلنپ آتتربیتو
بازگشت به طبقه بالاتر Kita Nuna CSS Function

定义和用法

CSS 的 circle() 函数用于定义一个具有半径和位置的圆形。

circle() 函数通常与 clip-path 属性和 shape-outside 属性一起使用。

实例

例子 1

将图像裁剪为半径为 50% 的圆形：

img {
  clip-path: circle(50%);
}

亲自试一试

例子 2

将图像裁剪为半径为 50% 的圆形，并将圆心定位到右侧：

img {
  clip-path: circle(50% at right);
}

亲自试一试

例子 3

使用 clip-path 和 circle() 实现动画效果：

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: circle(50%);
}
@keyframes mymove {
  50% {clip-path: circle(20%);}
}

亲自试一试

例子 4

结合使用 circle()、clip-path 和 shape-outside：

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

亲自试一试

CSS 语法

circle(radius at position)

值	描述
radius	必需。指定圆的半径。可以是以下值之一：长度值百分比 closest-side: amawa kare suna kawarorin dace kare na kare na fariyaron farthest-side: amawa kare suna kawarorin dace kare na fariyaron
at position	kauyen kare. kiwanci kiwanci bayan suna kawarorin za'a kare, kiwanci, kama left, right, top ko bottom kauyen kare: center

值

描述

radius

必需。指定圆的半径。可以是以下值之一：