css3 - 这个效果用 CSS 可以实现吗？border-image

Question

不想切整张图片，只把两个小球单独切出来，因为小球有闪动的效果。用了border-radius: 50%;画出一个圆，但border-image的小球仍然已正方形来排列。

代码放在jsbin上
http://jsbin.com/redolerota/1/edit?html,...

Answer 1

demo

Answer 2

Just use CSS to draw~
https://jsbin.com/vozetu/

Answer 3

The round bottom and the small ball border are divided into two layers. For the small ball border layer, use :after to cover it. You don’t need border-image. . .

Answer 4

No, just practical pictures, where can you get so many things?

Answer 5

border-image does not seem to support rounded corners, or you can try canvas drawing

Answer 6

Draw it on canvas

Answer 7

Try z-index layering