CSS circle() 函数

定义和用法

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 ທີ່ຕັ້ງຢູ່ຕາມການຕັ້ງຕັດ)

ຂໍ້ມູນດ້ານເຕັກນິກ

ການສະໜັບສະໜູນບັດຊະນະກຳ

ຈຳນວນທີ່ຢູ່ໃນຕາມການແບບບັດຊະນະກຳລັງຈະສະແດງວ່າ ບັດຊະນະກຳທີ່ເປັນການສະໜັບສະໜູນວິສະວະກອນດັ່ງກ່າວຫຸດທ້າຍ

ບັນດາໜ້າທີ່ກ່ຽວຂ້ອງ

ກ່ຽວກັບ:ທາງການປະກອບເຄື່ອງ clip-path

ກ່ຽວກັບ:ລະບຽບ CSS shape-outside

ກ່ຽວກັບ:ຫົວຂໍ້ຕາມວິສະວະກອນ CSS ellipse()

ກ່ຽວກັບ:ຫົວຂໍ້ຫົວຂໍ້ inset()

ກ່ຽວກັບ:ຫົວຂໍ້ຫົວຂໍ້ polygon()