css - 可以用 CSS 创建 3D 灯光效果吗？

Question

这是我想用 HTML/CSS 重新创建的图像:

中心渐变非常简单，两个圆环(围绕中心的边框，以及围绕有自己边框的 div 的 div)也是如此。左边的外部阴影看起来也很简单。

这是我迄今为止最好的近似值 ( with a matching fiddle ):

  <div id="youedge">
    <div id="youlight" class="round border radialgradientbg">                
    </div>
  </div>

#youedge {
    border:30px solid #888;
    border-radius:190px;
    width:190px;height:190px;margin:50px;
    box-shadow:-30px 0 0 #555;
}

    #youlight { width:150px; height:150px; background-color:#2b0c0f; }
    .round { border-radius:190px; }
    .border { border:20px solid #777; }
    body { background-color:#999; }

    .radialgradientbg {
    background: -moz-radial-gradient(center, ellipse cover,  #4c1113 0%, #16040a 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#4c1113), color-stop(100%,#16040a)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #4c1113 0%,#16040a 100%); /* Chrome10+,Safari5.1+ */
    } 

我想不通的是围绕中心的两个灰色边框上的 3D 灯光效果。有没有办法在 CSS 中实现这一点？

Answer 1

您可以使用单个元素并使用 :before 和 :after 以及 linear-gradient 和 box-阴影..

想法是在主要元素后面放置两个圆圈，具有相反的线性渐变背景..

.circle-3d {
  position: relative;
  width: 150px;
  height: 150px;
  background: black;
  border-radius: 50%;
  margin:2em;
}

.circle-3d:before {
  position: absolute;
  content: '';
  left: -20px;
  top: -20px;
  bottom: -20px;
  right: -20px;
  background: linear-gradient(90deg, #666, #ccc);
  border-radius: 50%;
  z-index: -2;
  box-shadow: -20px 0 10px -5px #000;
}

.circle-3d:after {
  position: absolute;
  left: -10px;
  top: -10px;
  bottom: -10px;
  right: -10px;
  background: linear-gradient(270deg, #222, #eee);
  content: '';
  border-radius: 50%;
  z-index: -1;
}

<div class="circle-3d"></div>