您的位置：首页技术文章
文章详情页

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

浏览：386日期：2023-07-13 14:21:24

问题描述

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

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

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

问题解答

回答1：

demo

回答2：

用 CSS 畫就可以哩~https://jsbin.com/vozetu/

回答3：

圆底和小球边框分成两层，小球边框那一层用:after,罩在上面不就行了，可以不用border-image。。。

回答4：

并不能，老老实实用图片就是了，哪里搞这么多东西

回答5：

border-image好像不支持圆角，或者可以试试canvas绘图

回答6：

canvas画出来

回答7：

z-index分层试试

标签： CSS
上一条：css - outline 可以只设置一条边吗？下一条：css3 - css怎么实现图片环绕的效果
相关文章：
1. javascript - react能够使用什么时间插件2. node.js - 我是一个做前端的，求教如何学习vue，node等js引擎？3. docker api 开发的端口怎么获取？4. 如何解决Centos下Docker服务启动无响应，且输入docker命令无响应？5. 前端 - 类到底该如何去命名 .newsList 这种的命名难道真的不是过度语义化吗？~6. java - 为什么第一个线程已经释放了锁，第二个线程却不行？7. 如何解决docker宿主机无法访问容器中的服务？8. PHP中的$this代表当前的类还是方法？9. sublime-text - sublime text 3中编译python（sublimeREPL），如何仅运行单行/选定部分10. 老师，flex-shrink: 1; 按视频操作，不会自动缩放
排行榜
node.js - 我是一个做前端的，求教如何学习vue，node等js引擎？
node.js - 我是一个做前端的，求教如何学习vue，node等js引擎？
1. docker api 开发的端口怎么获取？
2. javascript - react能够使用什么时间插件
3. android glide asbitmap 在baseadpter中的问题
4. java - 为什么第一个线程已经释放了锁，第二个线程却不行？
5. docker镜像push报错
6. docker网络端口映射，没有方便点的操作方法么？
7. sublime-text - sublime text 3中编译python（sublimeREPL），如何仅运行单行/选定部分
8. 前端 - 类到底该如何去命名 .newsList 这种的命名难道真的不是过度语义化吗？~
9. 老师，flex-shrink: 1; 按视频操作，不会自动缩放
10. 如何解决Centos下Docker服务启动无响应，且输入docker命令无响应？
热门标签