网页上画一个球

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

这次其实不用讲啥效果，其实就是单纯的普及一下html5 and css的一些基础知识的用法，比如在网页上画一个球，听上去挺简单，但是也挺基础的，基础不牢地动山摇。 画一个球，其实有很多方法，但是我们如果能用最简单的方式实现就好，这就好像数学解题一样，巧妙的解决，完美的代码，用最少的代码解决问题。

思路

主要是在h5里面设置一个div盒子，然后利用css代码去实现。 主要是用到了这个四行代码 透明度设置 background:-webkit-gradient 背景颜色线性设置 背景阴影设置 box-shadow 背景圆角设置 border-radius

	opacity: 0.9;
			/*background:rgba(101,211,186,0.70);*/
			background:-webkit-gradient(linear,0 0,100% 100%,from(#fff), to(#4B98F0));
			/* border:1px solid rgba(75,152,240,0.5); */
			box-shadow:0 2px 4px 0 rgba(110,103,103,0.50);
			border-radius:100%;

他们组合在一起就可以实现一个挺好的效果，其实我们平时见到了许多设计都是这么来的，看上去非常的漂亮其实很简单的实现，这就叫设计的美感不是哈哈哈哈。

一些基础的配置，比如宽度，高度等等

	left:200px;
			top: 10px;
			width: 46px;
			height: 46px;

这些配置就不用多说什么了吧，到此我们就可以实现一个圆球了，接下来我们来看看最后的效果是什么样子的。

效果