请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
二维的web世界里，圆形元素不能变成真正的球体，我们力所能及的，就是让它看上去像个球体。我们来看这么个圆形元素：
它不难实现，无非就是设置好一致的高宽和相应的背景色，然后再设置一下 border-radius 为 50% 便可。但这个怎么看都只是一个圆形元素，不是球体。往下看：
这个像个球体了吧？这是怎么做的？简单，在圆形基础上加入一个圆形渐变背景而已：
background: radial-gradient(circle at 100px 100px, #5cabff, #000);
这是圆形过渡到球体的方式之一，属最简单的实现方式。这是欺骗行为，因为它不是真正的球体，看上去像个球体而已。全部代码如下：
<style> .yuan { margin: 0 auto; height: 200px; width: 200px; border-radius: 50%; background: #3e73ac; } .ball { background: radial-gradient(circle at 100px 100px, #5cabff, #000); } </style>
<div class="yuan"></div> <p><br><br></p> <div class="yuan ball"></div>
| 
发表于 2022-3-16 21:47
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2022-3-17 12:46
