请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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>
|