css3心得（1）：灵活使用border-radius属性画一个彩色小球

用css3中border-radius画出一个彩色小球

效果图：

<div><div>

		box-shadow:Xoffset   Yoffset     blur 		spread color
        		   x方向偏移量 y方向偏移量 高斯模糊大小	伸展大小 颜色

body{
     
	margin:0;
	background-color:#000;
}

div {
     
			/* 将小球定位到视口 */
            position: absolute;
            left: calc(50% - 60px);
            top: calc(50% - 60px);
            width: 200px;
            height: 200px;
            /* 设置小球的shadow属性 
            */
            border: 1px solid #fff;
            border-radius: 50%;
            box-shadow: inset 0px 0px 10px #fff,//inset表示外阴影
                inset 10px 0px 20px #f0f,
                inset -10px 0px 20px #0ff,
                inset 10px 0px 60px #f0f,//再叠加一层
                inset -10px 0px 60px #0ff,
                -10px 0px 30px #f0f,//不写代表内阴影outset
                10px 0px 30px #0ff;
        }

再画一个太阳

<div>div>

body{
     
	margin:0;
	background-color:#000;
}
div{
     
            /* 定位到视口 */
            position:absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;

            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #fff;

            box-shadow: 0px 0px 30px 20px #fff,
            			//这里必须要写伸展的属性，目的：过渡背景与阴影
                        0px 0px 60px 50px #ff0;//重叠
        }