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

最新推荐文章于 2025-03-25 16:08:03 发布

原创最新推荐文章于 2025-03-25 16:08:03 发布 · 635 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍了如何使用CSS3的border-radius属性创建一个彩色小球，并进一步展示了如何画出一个太阳形状，通过实例展示CSS3的灵活性。

用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;//重叠
        }

标签

#css3