css3球体怎么实现

css3实现球体的方法：1、创建一个 宽 高相等的正方形元素，使用border-radius属性将其设置为 圆 形；2、使用“background:radial-gra die nt( .. .)”语句给圆形元素添加一个径向渐变的 背景颜色 即可实现球体效果。

本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。

css3实现球体的步骤：

1、基本形状

我们先来实现一个基本的圆，HTML 代码如下：

<figure class="circle"></figure>

　这里使用的是 HTML5 新增标签 figure，也可以用其它标签。figure 标签专门用于显示网页中的图片 或者 其它图表内容。为了实现圆型效果，添加一些基础的样式：

.circle {
dis play : block;
background: black;
border-radius: 50%;
h ei ght: 300px;
width: 300px;
m arg in: 0;
}

2、径向渐变

上面实现了基本的圆形效果，这里增加径向渐变效果来实现更逼真的球体。

.circle {
  display: block;
  background: black;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  mar gin : 0;
  background: - webkit -radial-gradient(100px 100px, circle,  # 5cabff, #000);
  background: -moz-radial-gradient(100px 100px, circle, #5cabff, #000);
  background: radial-gradient(100px 100px, circle, #5cabff, #000);
}

3、添加阴影增强立体感

上节已经有基本的球体效果出来了，为了增加立体效果，我们在球的底部加个阴影，这样立体感就更强了。

这里用到的 HTML 代码如下：

<section class="stage">
	<figure class="circle"><span class="shadow"></span></figure>
</section>

CSS 代码如下：

.stage {
				width: 300px;
				height: 300px;
				display: inline-block;
				margin: 20px;
				-webk IT - PE rspective: 1200px;
				-webkit-perspective-origin: 50% 50%;
			}

			.circle .shadow {
				position: absolute;
				width: 100%;
				height: 100%;
				background: -webkit-radial-gradient(50% 50%, circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
				-webkit -t ransform: rotateX(90 deg ) translateZ(-150px);
				z -i ndex: -1;
			}

（学习视频分享：css视频教程）

以上就是css3球体怎么实现的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 css3球体怎么实现 全部内容，希望文章能够帮你解决 css3球体怎么实现 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css3球体怎么实现的详细内容...