前端综合案例-仿慕课首页中，.current写“border-radius:50%”为什么和“border-radius: 4px”效果不一样？

/* 切图按钮 */
.circle-list{
    position: absolute;
    right: 120px;
    bottom: 25px;
}

.circle-list li{
    cursor: pointer;
    float: left;
    width: 8px;
    height: 8px;
    margin-left: 5px;
    border-radius: 50%;
    background-color: #fff;
}

.circle-list li.current{
    width: 20px;
    border-radius: 50%;
}

童真模式启动 2022-02-21

源自：前端综合案例-仿慕课首页 3-5 切图圆点

收起

1回答

好帮手慕阿园 2022-02-22 11:21:11

同学你好，border-radius的px和%所表示的意义是不同的，形状也是不同的，W3C中的解释如下

测试效果如下

同学可以自己测试试试哦

https://www.w3school.com.cn/cssref/pr_border-radius.asp

祝学习愉快~

收起回答

提问者童真模式启动 #1

可这里不是一样吗？上面那个为什么就不一样呢？

2022-02-22 16:17:55
好帮手慕阿园回复提问者童真模式启动 #2

同学你好，同学可以参考如下案例来理解下
效果如下
元素为宽高相等的正方形时，当border-radius的值是以px为单位时，是以边框的每个顶点为边界做一个直径为XXpx的圆/椭圆；当border-radius的值是以%为单位时，是以边框的每个顶点为边界做一个半径为XXpx（=height * 50%=width * 50%）的圆
关于border-radius同学可以不用深究，每一个数值的大小都会影响其效果，这里属于前端的内容，同学了解即可，如果同学感兴趣可以系统的学习下前端的知识哦
祝学习愉快~

2022-02-22 18:22:54