html - 重新定位径向渐变

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; to background-position: top left, bottom left; 将背景定位在顶部和底部
• 背景图像:径向渐变(圆圈在 0 50%，rgba(255,255,224,0) 0.4em，#ffffe0 0.5em)，径向渐变(圆圈在 100% 50%，rgba(255,255,224, 0) 0.4em, #ffffe0 0.5em); to 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>