background-image:百分比和像素值得结果不一样 - css吧

level 2

代码1如下：
<html>
<head><style>p{width:200px;height:200px;border-radius:50%;background-image:repeating-radial-gradient(circle at 100px 100px, red 0px, blue 50px);}
</style>
</head>
<body>
<p></p>
</body>
</html>
代码2如下：
<html>
<head><style>p{width:200px;height:200px;border-radius:50%;background-image:repeating-radial-gradient(circle at 100px 100px, red 0px, blue 50%);}
</style>
</head>
<body>
<p></p>
</body>
</html>
上面的代码1和代码2的区别在于代码1的blue 50px，代码2的blue 50%，按理说，p元素是半径为100px的圆形，代码2的blue 50%也即50%×半径(100px)=50px。综上，经理论分析代码1和代码2的效果完全相同，可实测结果差别较大，这是为什么？

2025年06月13日 00点06分 1

level 8

此贴吧用户已被封禁

repeating-radial-gradient设置时还有个关键字<extent-keyword>
默认值为“farthest-corner”，渐变结束与容器最远的一个角相交，
改成“closest-side”，渐变结束与容器最近的一个边相切即可实现你想要的效果，具体可以看mdn了解下

2025年06月13日 02点06分 2

孑孓彳亍▫

大佬麻烦看下我的帖子呗 [泪]

background attachmentfixed 怎么才能跟缩放并存啊

2025年08月07日 01点08分

三元医美

2025年12月12日 03点12分