我正在尝试使用径向渐变在作为单选按钮的圆形元素内创建边框。基本CSS如下所示。我无法弄清楚为什么红色渐变不会在圆的整个圆周上盘旋。
当白色调接近100%时,在顶部,右侧,左侧和底部的红色中会出现间隙。
为什么会发生这种情况?在仍然使用径向渐变的情况下如何解决?
.container {
background: #ddd;
width: 400px;
height: 200px;
padding: 20px;
}
.radio {
display: inline-block;
background: white;
border-radius: 50%;
border: 2px solid transparent;
width: 20px;
height: 20px;
margin-right: 20px;
}
.radio1 { background: radial-gradient(circle closest-side, white 75%, red 100%); }
.radio2 { background: radial-gradient(circle closest-side, white 90%, red 100%); }
.radio3 { background: radial-gradient(circle closest-side, white 95%, red 100%); }
.radio4 { background: radial-gradient(circle closest-side, white 99%, red 100%); }
<div class="container">
<div class="radio"></div>
<div class="radio radio1"></div>
<div class="radio radio2"></div>
<div class="radio radio3"></div>
<div class="radio radio4"></div>
</div>
也在JSFiddle上:https://jsfiddle.net/zvgcs80f/
答案 0 :(得分:3)
正如评论中所指出的,相对于您的宽度/高度,您的百分比将转换为像素。在您的情况下,99%和100%会非常接近,并且您会遇到亚像素撕裂问题。
相反,您可以依靠calc()
轻松地将厚度定义为像素值,而与元素大小无关。
您还需要调整background-origin
并将其设为border-box
,以便在考虑边界区域的情况下绘制渐变,这样您将拥有一个完美的圆。
.container {
background: #ddd;
width: 400px;
height: 200px;
padding: 20px;
}
.radio {
display: inline-block;
background: white;
border-radius: 50%;
border: 2px solid transparent;
width: 20px;
height: 20px;
margin-right: 20px;
background-origin:border-box;
}
.radio1 { background-image: radial-gradient(circle closest-side, white calc(100% - 1px), red 100%); }
.radio2 { background-image: radial-gradient(circle closest-side, white calc(100% - 2px), red 100%); }
.radio3 { background-image: radial-gradient(circle closest-side, white calc(100% - 3px), red 100%); }
.radio4 { background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red 100%); }
<div class="container">
<div class="radio"></div>
<div class="radio radio1"></div>
<div class="radio radio2"></div>
<div class="radio radio3"></div>
<div class="radio radio4"></div>
</div>
这是另一个具有较大边界价值的示例,可以更好地说明background-origin
.container {
background: #ddd;
width: 400px;
height: 200px;
padding: 20px;
}
.radio {
display: inline-block;
background: white;
border-radius: 50%;
border: 20px solid rgba(0,0,0,0.2);
width: 50px;
height: 50px;
margin-right: 20px;
background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red 100%); }
<div class="container">
<div class="radio radio4"></div>
</div>
背景在填充框上绘制,然后在所有区域(边框)上重复出现。
如果您禁用重复,您将得到以下提示:
.container {
background: #ddd;
width: 400px;
height: 200px;
padding: 20px;
}
.radio {
display: inline-block;
background: white;
border-radius: 50%;
border: 20px solid rgba(0,0,0,0.2);
width: 50px;
height: 50px;
margin-right: 20px;
background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red 100%);
background-repeat:no-repeat;
}
<div class="container">
<div class="radio"></div>
</div>
这是如果我们仅在X轴上重复
.container {
background: #ddd;
width: 400px;
height: 200px;
padding: 20px;
}
.radio {
display: inline-block;
background: white;
border-radius: 50%;
border: 20px solid rgba(0,0,0,0.2);
width: 50px;
height: 50px;
margin-right: 20px;
background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red 100%);
background-repeat:repeat-x;
}
<div class="container">
<div class="radio"></div>
</div>
这是两种颜色都使用100%时发生的情况,这与您的情况类似,您将更好地理解为什么只在角落上有颜色。
.container {
background: #ddd;
width: 400px;
height: 200px;
padding: 20px;
}
.radio {
display: inline-block;
background: white;
border-radius: 50%;
border: 20px solid rgba(0,0,0,0.2);
width: 50px;
height: 50px;
margin-right: 20px;
background-image: radial-gradient(circle closest-side, white 100%, red 100%);
}
.one {
background-repeat:no-repeat;
}
.two {
background-repeat:repeat;
}
.three {
border-width:5px;
}
<div class="container">
<div class="radio one"></div>
<div class="radio two"></div>
<div class="radio three"></div>
</div>
如果我们更改原点,那就没问题了
.container {
background: #ddd;
width: 400px;
height: 200px;
padding: 20px;
}
.radio {
display: inline-block;
background: white;
border-radius: 50%;
border: 20px solid rgba(0,0,0,0.2);
width: 50px;
height: 50px;
margin-right: 20px;
background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red 100%);
background-origin:border-box;
}
<div class="container">
<div class="radio"></div>
</div>