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

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

浏览：111日期：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. 求大神帮我看看是哪里写错了 感谢细心解答2. javascript - JS设置Video视频对象的currentTime时出现了问题,IE,Edge,火狐,都可以设置,反而chrom却...3. css3 - [CSS] 动画效果 3D翻转bug4. php自学从哪里开始？5. javascript - 数组原声方法中的一段代码6. html - eclipse 标签错误7. 数据库 - MySQL 单表500W+数据，查询超时，如何优化呢？8. 网页爬虫 - python爬虫翻页问题，请问各位大神我这段代码怎样翻页，还有价格要登陆后才能看到，应该怎么解决9. phpstady在win10上运行10. python - from ..xxxx import xxxx到底是什么意思呢?
排行榜
phpstady在win10上运行
phpstady在win10上运行
1. angular.js - angularjs中的$compile怎么理解？
2. 网页爬虫 - python爬虫翻页问题，请问各位大神我这段代码怎样翻页，还有价格要登陆后才能看到，应该怎么解决
3. angular.js - 全站用的angular，但是像下面描述的这样强交互的功能用angular该用什么思路去做呢？
4. css - ionic中的栅格布局如何让文字内容多少不同的每一列中的内容都能垂直居中？
5. angular.js - angularjs ng-class指令改变ng-click点击的class属性失效
6. 求大神帮我看看是哪里写错了 感谢细心解答
7. angular.js - angular js点击按钮隐藏选中元素
8. python - from ..xxxx import xxxx到底是什么意思呢?
9. java - springboot 修改默认静态资源文件读取路径
10. php自学从哪里开始？
热门标签