是否可以使用CSS创建3D照明效果？

下面是我想用HTML/CSS重新创建的图像：

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

这是我到目前为止最好的近似值（）：

#youedge{
边框：30px实心#888；
边界半径：190px；
宽度：190px；高度：190px；边距：50px；
盒影：-30px0#555；
}
#youlight{宽度：150px；高度：150px；背景色：#2b0c0f；}
.round{边界半径：190px；}
.border{border:20px固体#777；}
正文{背景色：#999；}
.径向梯度bg{
背景：-moz径向梯度（中心，椭圆覆盖，#4c1113 0%，#16040a 100%）；/*FF3.6+*/
背景：-webkit渐变（径向、中-中、0px、中-中、100%、颜色停止（0%，#4c1113）、颜色停止（100%，#16040a））；/*铬、Safari4+*/
背景：-webkit径向梯度（中心，椭圆覆盖，#4c1113 0%，#16040a 100%）；/*Chrome10+，Safari5.1+*/
} 

---

我无法理解的是围绕中心的两个灰色边框上的3D灯光效果。有没有一种方法可以在CSS中实现这一点？

您可以使用单个元素，并使用

：before

和

：after

以及

线性渐变

和

框影

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

.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;
}

及

---

演示在

尼斯。我添加了径向渐变中心并调整了大小。这是一场势均力敌的比赛。

.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>