如何正确定位径向渐变背景？

Question

此代码的css位置对我有小的问题。

不幸的是，我需要这个圆圈在页面（div）的右侧而不是中间。感谢您的回答

body{
 margin:0;
 padding:0;
 }
 
 .session-box{
 background:#333;
 width:100%;
 min-height:100vh;
 }
 
 .circle{
 position: absolute;
  top: 0;
  left 0;    
  width: 100%;
  height: 100%;
 background: -moz-radial-gradient(transparent 200px, rgba(255,255,255,0.6) 200px);
  background: -webkit-radial-gradient(transparent 100px , rgba(255,255,255,0.6) 200px ) ;
  background: -ms-radial-gradient(transparent 100px, rgba(255,255,255,0.6) 200px);
  background: -o-radial-gradient(transparent 100px, rgba(255,255,255,0.6) 200px);
  }

<div class="session-box">
  <div class="circle"></div>
</div>

我需要这个

Answer 1

插入circle at calc(100% - 200px)作为第一个参数

请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient或
https://css-tricks.com/snippets/css/css-radial-gradient/

body{
 margin:0;
 padding:0;
 }
 
 .session-box{
 background:#333;
 width:100%;
 min-height:100vh;
 }
 
 .circle{
 position: absolute;
  top: 0;
  left 0;    
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at calc(100% - 200px), transparent 100px, rgba(255,255,255,0.6) 200px);
  }

<div class="session-box">
  <div class="circle"></div>
</div>

Answer 2

如果想要比at（safari doesn't support it）更好的支持，这里是另一种语法。默认情况下，渐变会放置在中心位置，因此我们增加了背景尺寸，将中心位置向右移动。

body {
  margin: 0;
  padding: 0;
}

.session-box {
  background: #333;
  width: 100%;
  min-height: 100vh;
}

.circle {
  position: absolute;
  top: 0;
  left 0;
  width: 100%;
  height: 100%;
  /* Circle with 100px Radius*/
  background-image: radial-gradient(circle 100px, transparent 50%, rgba(255, 255, 255, 0.6) 100%);
  /* Twice bigger than the container minus 2xRadius */
  background-size: calc(200% - 200px) 100%;
}

<div class="session-box">
  <div class="circle">
  </div>
</div>

您也可以在没有calc()的情况下这样做：

body {
  margin: 0;
  padding: 0;
}

.session-box {
  background: #333;
  width: 100%;
  min-height: 100vh;
}

.circle {
  position: absolute;
  top: 0;
  left 0;
  width: 100%;
  height: 100%;
  padding-right:100px; /*Equal to radius*/
  /* Circle with 100px Radius*/
  background-image: radial-gradient(circle 100px, transparent 50%, rgba(255, 255, 255, 0.6) 100%);
  /* Twice bigger than the container */
  background-size: 200% 100%;
  background-origin:content-box; /* We don't consider the padding when doing the calculation */
  box-sizing:border-box;
}

<div class="session-box">
  <div class="circle">
  </div>
</div>