重新定位径向梯度

Question

我正在制作票证形状div，但是我的问题是我无法将圆圈移动到想要的位置。

我正在关注此code：

* {
  box-sizing: border-box;
}

body {
  padding: 2em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  background-color: #ff4500;
  -webkit-animation: bg 10s linear infinite alternate;
  animation: bg 10s linear infinite alternate;
  color: rgba(0, 0, 0, 0.25);
  font-size: 13px;
}

a {
  color: rgba(0, 0, 0, 0.35);
}

.ticket {
  display: inline-block;
  box-sizing: content-box;
  -webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
  position: relative;
  height: 1em;
  padding: 1em;
  color: #000;
  font-size: 16px;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle at 0 50%, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 100% 50%, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em);
  background-position: top left, top right;
}

@-webkit-keyframes bg {
  0% {
    background-color: #ff4500;
  }
  50% {
    background-color: #b0e0e6;
  }
  100% {
    background-color: #ff4500;
  }
}

@keyframes bg {
  0% {
    background-color: #ff4500;
  }
  50% {
    background-color: #b0e0e6;
  }
  100% {
    background-color: #ff4500;
  }
}

<span class="ticket">Ticket shape with transparent holes punched!</span>
<br />
<br />
<p>Based on Lea Verou's <a href="http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/">faux inset border-radius</a> technique.</p>

我想要的是将圆圈移动到div的左上方和左下方。

Answer 1

问题

问题在于，第一个背景显示在第二个背景的上方，您可以移动圆的位置，但是它是隐藏的。

要修复

您可以通过以下更改来实现：

• background-size: 51% 100%;至background-size: 100% 50%;，以使背景占据高度的一半而不是宽度的一半
• background-position: top left, top right;至background-position: top left, bottom left;将背景放在顶部和底部
• background-image: radial-gradient(circle at 0 50%, rgba(255,255,224,0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 100% 50%, rgba(255,255,224,0) 0.4em, #ffffe0 0.5em);至background-image: radial-gradient(circle at 0 0, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 0 100%, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em);将径向渐变放置在背景的顶部和底部

* {
  box-sizing: border-box;
}

body {
  padding: 2em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  background-color: #ff4500;
  -webkit-animation: bg 10s linear infinite alternate;
  animation: bg 10s linear infinite alternate;
  color: rgba(0, 0, 0, 0.25);
  font-size: 13px;
}

a {
  color: rgba(0, 0, 0, 0.35);
}

.ticket {
  display: inline-block;
  box-sizing: content-box;
  -webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
  position: relative;
  height: 1em;
  padding: 1em;
  color: #000;
  font-size: 16px;
  background-size: 100% 50%;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle at 0 0, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 0 100%, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em);
  background-position: top left, bottom left;
}

@-webkit-keyframes bg {
  0% {
    background-color: #ff4500;
  }
  50% {
    background-color: #b0e0e6;
  }
  100% {
    background-color: #ff4500;
  }
}

@keyframes bg {
  0% {
    background-color: #ff4500;
  }
  50% {
    background-color: #b0e0e6;
  }
  100% {
    background-color: #ff4500;
  }
}

<span class="ticket">Ticket shape with transparent holes punched!</span>
<br />
<br />
<p>Based on Lea Verou's <a href="http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/">faux inset border-radius</a> technique.</p>

Answer 2

您可以使用以下属性更改位置。

background-image radial-gradient(circle at 0 50%, rgba($bg,0) $hole, $bg ($hole + .1em)), radial-gradient(circle at 100% 50%, rgba($bg,0) $hole, $bg ($hole + .1em))