可以用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-shadow进行此操作。

这个想法是在主元素后面放两个圆圈，使用相反的线性渐变背景。

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

和

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

http://dabblet.com/gist/7397033

演示