我正在寻求一些关于在 CSS 中创建“环形”形状的建议。以下是我需要实现的一些重要的详细目标:
环形边框粗细必须是百分比数字,而不是 rm 或绝对像素数,这样环形才能根据容器大小完全响应;
环形边框需要有背景,对于我的场景,背景有时可以是3-4种纯色的组合,或者是渐变色;
环的填充物必须是透明的,这样用户才能透过它看到背景。
以下是我使用的一些尝试:
制作一个只有边框宽度的
border-radius: 50%
div,但很快我发现边框宽度不能是百分比数字;SVG 将圆形 div 剪裁成环形。到目前为止,我无法成功使其工作...如果这是正确的方法,请分享一些片段。
最佳答案
您可以考虑 mask
来实现这一目标其中的想法是使用 radial-gradient
来创建孔并使用固定值,这将使可见部分(厚度)响应。
.box {
border-radius:50%;
background:linear-gradient(red,purple,orange);
-webkit-mask: radial-gradient(transparent 89px,#000 90px);
mask: radial-gradient(transparent 89px,#000 90px);
}
.box:before {
content:"";
display:block;
padding-top:100%;
}
.container {
margin:0 auto;
max-width:200px;
animation:change 3s linear alternate infinite;
}
@keyframes change{
to {
max-width:400px;
}
}
body {
background:linear-gradient(to right,yellow,pink);
}
<div class="container">
<div class="box">
</div>
</div>
关于html - 具有背景和百分比边框宽度的 CSS 环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54792102/