css - 具有可变边框宽度的css圆形掩码
解决方案
使用具有相同背景的两个元素并调整背景大小/背景位置以创建这种效果的错觉:
.box {
width:200px;
height:200px;
border-radius:50%;
background-image:url(https://picsum.photos/id/1057/800/800);
background-size:auto 220px;
background-position:top left;
position:relative;
}
.box:before {
content:"";
position:absolute;
bottom:-20px;
left:0;
width:100px;
height:100px;
background-image:inherit;
background-size:inherit;
background-position:bottom left;
border-radius:inherit;
}
<div class="box">
</div>
这是使用 CSS 变量轻松控制它的更通用的方法:
.box {
--b:-20px; /* Bottom of the pseudo element*/
--l:10px; /* Left of the pseudo element*/
--s:2; /*size of the pseudo element (as a scale factor)*/
width:200px;
height:200px;
border-radius:50%;
background-image:url(https://picsum.photos/id/1057/800/800);
background-size:auto calc(100% - var(--b));
background-position:top left;
position:relative;
display:inline-block;
}
.box:before {
content:"";
position:absolute;
bottom:var(--b);
left:var(--l);
width:calc(100%/var(--s));
height:calc(100%/var(--s));
background-image:inherit;
background-size:auto calc(100%*var(--s) - var(--b));
background-position:bottom 0 left calc(-1 * var(--l));
border-radius:inherit;
}
<div class="box"></div>
<div class="box" style="--s:3;l:50px;"></div>
<div class="box" style="--s:1.5;l:50px;--b:-10px"></div>
您可以轻松添加边框:
.box {
--b:-20px; /* Bottom of the pseudo element*/
--l:10px; /* Left of the pseudo element*/
--s:2; /*size of the pseudo element (as a scale factor)*/
width:200px;
height:200px;
border-radius:50%;
background-image:url(https://picsum.photos/id/1057/800/800);
background-size:auto calc(100% - var(--b));
background-position:top left;
position:relative;
display:inline-block;
border:2px solid blue;
box-sizing:border-box;
}
.box:before {
content:"";
position:absolute;
bottom:var(--b);
left:var(--l);
width:calc(100%/var(--s));
height:calc(100%/var(--s));
background-image:inherit;
background-size:auto calc(100%*var(--s) - var(--b));
background-position:bottom 0 left calc(-1 * var(--l));
border-radius:inherit;
border:inherit;
box-sizing:inherit;
}
<div class="box">
</div>
<div class="box" style="--s:3;l:50px;">
</div>
<div class="box" style="--s:1.5;l:50px;--b:-10px">
</div>
推荐阅读
- postgresql - 如何在计数器表中增加值
- hazelcast - 在具有百万条目的 imap 上使用执行程序的 hazelcast 性能
- android-proguard - ANDROID:java.util.MissingResourceException:找不到捆绑包'org.eclipse.paho.client.mqttv3.internal.nls.logcat_en_US'的资源,键''
- octave - 你如何从递归函数中获得所有孩子的输出?
- python - Python Pandas:创建排名列,移动原始列最大排名
- jmeter - JMeter - 是否可以随机运行线程组但一次只能运行一个
- python - 如何重复此部分以便两个用户可以输入他们的详细信息?
- python - 如何使用波前加载搅拌机文件?
- jquery - 重新加载父页面后将 scrollTop 设置回原来的位置
- javascript - 当我尝试将文本/xml 转换为对象时,为什么会得到 {"location": null}?