堆叠圆会在边界半径上产生黑条 [英] Stacking circles produces a black bar on border radius
本文介绍了堆叠圆会在边界半径上产生黑条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在这里有个令人费解的企业.
I have quite the puzzling enterprise here.
我正在构建一个用作火炬/探照灯"的鼠标.如果发生悬停，则所有文本(内联元素，按钮，您明白了)都从通常的白色反转为黑色，正常背景是淡黄色的氛围.
I'm building a mouse which serves as a 'torch / searchlight'. All text (inline elements, buttons, you get the point) gets inverted from the usual white to black if there is a hover happening on it, the normal background is a yellow-ish vibe.
我目前具有以下设置:
const _$shadow = $('.b-cursor__shadow');
const _$front = $('.b-cursor__front');
const _$back = $('.b-cursor__back');
$(document).on('mousemove', (e) => {
_$back.css({
left: e.pageX,
top: e.pageY
});
_$front.css({
left: e.pageX,
top: e.pageY
});
_$shadow.css({
left: e.pageX,
top: e.pageY
});
});
html,
body {
padding: 0;
margin: 0;
cursor: none;
background: red;
}
.test {
background: darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
p,
span,
a {
position: relative;
z-index: 105;
}
.b-cursor__back,
.b-cursor__front,
.b-cursor__shadow {
position: fixed;
width: 8rem;
height: 8rem;
margin-left: -4rem;
margin-top: -4rem;
border-radius: 50%;
}
.b-cursor__shadow {
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
}
/* background changes */
.b-cursor__back {
z-index: 104;
background: #18173e;
clip-path: circle(50% at 50% 50%);
}
.b-cursor__front {
z-index: 106;
background: white;
clip-path: circle(50% at 50% 50%);
mix-blend-mode: difference;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div class="b-cursor__shadow"></div>
<div class="b-cursor__back"></div>
<div class="b-cursor__front"></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet
<p>
</div>
( codepen )
这几乎产生了预期的结果，除了border-radius: 50%无法正确处理准精巧的div堆叠.像素剧！图片说明:
This nearly produces the desired result, except the border-radius: 50% doesn't handle semi-nice stacking divs correctly. Pixel drama! Image for clarification:
问题:如何在保留当前对文本的影响的同时删除通过堆叠两个具有相同大小的元素而创建的黑色边框?
Question: How can I remove the black border created by stacking these two elements with identical size while preserving the current effect on text?
推荐答案
我将在上面使用伪元素简单地添加另一个元素，以隐藏该小边框，并通过移动容器而不是每个元素来简化代码.也不需要clip-path
I would simply add another element above using pseudo element to hide that small border and simplify the code by moving the container instead of each element. Also no need for the clip-path
const _$cursor = $('.b-cursor');
$(document).on('mousemove', (e) => {
_$cursor.css({
left: e.pageX,
top: e.pageY
});
});
html,
body {
padding: 0;
margin: 0;
cursor: none;
background: red;
}
.test {
background: darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
p,
span,
a {
position: relative;
z-index: 105;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
margin-left: -4rem;
margin-top: -4rem;
}
/*the magic element*/
.b-cursor:before {
content:"";
position:absolute;
top:-1px;
left:-1px;
right:-1px;
bottom:-1px;
border:2px solid rgba(231, 232, 192, 1);
border-radius:50%;
z-index:999;
}
/**/
.b-cursor__back,
.b-cursor__front,
.b-cursor__shadow {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
}
.b-cursor__shadow {
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
}
/* background changes */
.b-cursor__back {
z-index: 104;
background: #18173e;
}
.b-cursor__front {
z-index: 106;
background: white;
mix-blend-mode: difference;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div class="b-cursor__back"></div>
<div class="b-cursor__front"></div>
<div class="b-cursor__shadow"></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
这是另一种想法，它使用更少的代码和纯JS而没有jQuery:
Here is anoher idea with less of code and pure JS without jQuery:
document.onmousemove = function(e) {
document.body.style.setProperty('--mx',(e.pageX)+'px');
document.body.style.setProperty('--my',(e.pageY)+'px');
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
html {
background:red;
}
body{
padding: 1px;
margin: 0;
min-height:100vh;
cursor: none;
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed;
}
.test {
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed,
darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
top:var(--my);
left:var(--mx);
margin-left: -4rem;
margin-top: -4rem;
}
/*the magic element*/
.b-cursor:before{
content:"";
position:absolute;
top:-1px;
left:-1px;
right:-1px;
bottom:-1px;
border:2px solid rgba(231, 232, 192, 1);
border-radius:50%;
z-index:999;
}
.b-cursor:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
border-radius:50%;
z-index:998;
}
/**/
.b-cursor > div {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
z-index: 997;
background: white;
mix-blend-mode: difference;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
如果我们考虑使用另一种渐变来替代用于修复黑色阴影和边框的渐变，您仍然可以进行更多优化:
You can still optimize more if we consider another gradient that will replace the shadow and the border that we used to fix the black one:
document.onmousemove = function(e) {
document.body.style.setProperty('--mx',(e.pageX)+'px');
document.body.style.setProperty('--my',(e.pageY)+'px');
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
html {
background:red;
}
body{
padding: 1px;
margin: 0;
min-height:100vh;
cursor: none;
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed;
}
.test {
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed,
darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
top:var(--my);
left:var(--mx);
margin-left: -4rem;
margin-top: -4rem;
}
.b-cursor:before{
content:"";
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
background:
radial-gradient(farthest-side,
transparent calc(100% - 18px),rgba(231, 232, 192, 1) calc(100% - 15px),
rgba(231, 232, 192, 1) calc(100% - 10px),transparent 100%);
border-radius:50%;
z-index:999;
}
.b-cursor:after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
z-index: 998;
background: white;
mix-blend-mode: difference;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
Safari不支持at的渐变语法，如此问题中所述，因此这是另一种选择:
Safari doesn't support the gradient syntax with at as detailed in this question so here is another alternative:
document.onmousemove = function(e) {
document.body.style.setProperty('--mx',(e.pageX)+'px');
document.body.style.setProperty('--my',(e.pageY)+'px');
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
html {
background:red;
}
body{
padding: 1px;
margin: 0;
min-height:100vh;
cursor: none;
background:
radial-gradient(farthest-side ,#18173e 100%,transparent 100%)
calc(var(--x) - 4rem) calc(var(--y) - 4rem)/8rem 8rem fixed no-repeat;
}
.test {
background:
radial-gradient(farthest-side ,#18173e 100%,transparent 100%)
calc(var(--x) - 4rem) calc(var(--y) - 4rem)/8rem 8rem fixed no-repeat,
darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
top:var(--my);
left:var(--mx);
margin-left: -4rem;
margin-top: -4rem;
}
.b-cursor:before{
content:"";
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
background:
radial-gradient(farthest-side,
transparent calc(100% - 18px),rgba(231, 232, 192, 1) calc(100% - 15px),
rgba(231, 232, 192, 1) calc(100% - 10px),transparent 100%);
border-radius:50%;
z-index:999;
}
.b-cursor:after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
z-index: 998;
background: white;
mix-blend-mode: difference;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
这篇关于堆叠圆会在边界半径上产生黑条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
