这是我想用 HTML/CSS 重新创建的图像:
中心渐变很简单,两个环也是如此(中心周围有一个边框,该 div 周围有一个 div,它有自己的边框)。左边的外部阴影似乎也很简单。
这是迄今为止我最好的近似值(带有匹配的小提琴):
<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 中实现这一点?