Html 使用CSS创建光泽灯光效果

我正试图用CSS和HTML创建一个灯光效果。就像这张图片

我不知道这是否可能。或者怎么做

任何帮助都将不胜感激

.circle{
边界：10px固体；
边界半径：50%；
宽度：200px；
高度：200px；
背景颜色：绿色；
}

---

试试这样的方框阴影：

根据需要调整阴影值和背景渐变色

 .circle {
    border:10px solid;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: #f8ffe8;
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZmZlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzU2YmM2YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOTliMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8ffe8), color-stop(17%, #56bc6c), color-stop(100%, #199b00));
    background: -webkit-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
    background: -o-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
    background: -ms-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
    background: linear-gradient(to bottom, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8ffe8', endColorstr='#199b00', GradientType=0);
    -webkit-box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
    -moz-box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
    box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
}

---

您可以结合使用

径向渐变

和伪元素来实现光泽效果

从白色到绿色的过渡可以通过径向梯度产生。#fff颜色停止在5%

使用伪元素上的

不透明度

提供光泽效果饰面，并且具有类似于父元素的形状，具有白色背景和减小的宽度

.circle:：after{
背景：白色无重复滚动0；
边界半径：50%；
内容：“；
显示：块；
高度：100px；
不透明度：0.15；
位置：绝对位置；
宽度：150px；
左：20px；
}
.圆圈{
背景图像：径向梯度（50像素10像素处的椭圆，#ffffff 0%，#fff 5%，#00ff00 100%）；
边界：10px固体；
边界半径：50%；
高度：200px；
位置：相对位置；
宽度：200px；
}

---

您可以使用第二个

div

作为高光，尝试提供更强的3D效果，释放出

框阴影

，用于边缘较暗的轮廓

.circle{
宽度：164px；
高度：164px；
背景色：#19f000；
边界半径：100%；
位置：相对位置；
边框：10px实心#4444；
盒影：0.15px 0 rgba（0,0,0,8）插入；
变换：旋转（-20度）；
}
.亮点{
位置：绝对位置；
顶部：2个；
右：0；
左：0；
保证金：自动；
宽度：80%；
身高：64%；
不透明度：.92；
边界半径：100%；
/*免费梯度兼容性-激活*/
背景：-moz线性梯度（顶部，rgba（255255,1）0%，rgba（255255,0）100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、色挡（0%，rgba（255255,1））、色挡（100%，rgba（255255,0））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，rgba（255255,1）0%，rgba（255255,0）100%）；/*Chrome10+，Safari5.1+*/
背景：-o-线性梯度（顶部，rgba（255255,1）0%，rgba（255255,0）100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，rgba（255255,1）0%，rgba（255255,0）100%）；/*IE10+*/
背景：线性梯度（至底部，rgba（255255,1）0%，rgba（255255,0）100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffff'，endColorstr='#00ffffff'，GradientType=0）；/*IE6-9*/
}

以下是我的示例

*，
*：之前，
*：之后{
框大小：边框框；
}
div{
宽度：120px；
高度：120px；
边界半径：60px；
背景：线性梯度（至底部，#393939 0%，#151515 100%）；
位置：相对位置；
}
部门：以前{
内容：''；
宽度：106px；
高度：106px；
边界半径：53px；
背景#19f000；
边框：1px纯黑；
位置：绝对位置；
左：7px；
顶部：7px；
}
部门：之后{
内容：''；
宽度：80px；
高度：60px；
边界半径：50%；
背景：线性梯度（到底部，rgba（255，255，255，1）0%，rgba（255，255，255，0）100%）；
位置：绝对位置；
变换：旋转（-18度）；
左：13px；
顶部：9px；
}

---

您也可以使用单个元素，将一个所需大小的

径向渐变

图像层叠在倾斜的

线性渐变

图像上，然后将其适当定位。多背景图像和分层具有非常好的浏览器支持（IE9+），但渐变仅在IE10+中受支持

.circle{
边界：10px固体；
边界半径：50%；
宽度：200px；
高度：200px；
背景：径向梯度（90像素45像素处的椭圆，rgba（255,255,255,0.75）10%，rgba（255255,0.5）30%，rgba（255255,0）32%，rgba（25240,0,1）45%，线性梯度（160度，透明12%，rgb（25240,0）30%）；
背景大小：125%80%，100%100%；
背景重复：无重复；
}

.圆圈{
边界：10px固体；
边界半径：50%；
宽度：200px；
高度：200px；
背景：rgb（25240,0）；/*旧浏览器*/
背景：-莫兹线性梯度（顶部，rgba（25240,0,1）0%，rgba（255255,1）100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、色挡（0%，rgba（25240,0,1））、色挡（100%，rgba（255255,1））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，rgba（25240,0,1）0%，rgba（255255,1）100%）；/*Chrome10+，Safari5.1+*/
背景：-o-线性梯度（顶部，rgba（25240,0,1）0%，rgba（255255,1）100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，rgba（25240,0,1）0%，rgba（255255,1）100%）；/*IE10+*/
背景：线性梯度（到顶部，rgba（25240,0,1）0%，rgba（255255,1）100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#19f000'，endColorstr='#ffffff'，GradientType=0）；/*IE6-9*/
}

请使用上面提到的背景渐变色。我希望这本书能对你有所帮助

---

这是正在运行的演示。

Oopss，应该更早地刷新页面，并看到您已经使用了

径向梯度：（但我将把我的答案留在那里，因为这可以使用单个元素来完成。+1给您。没问题，Harry。我更喜欢您的答案，即限制代码行数。
<!doctype html>
<html>
<head>
<style>
.circle {
    border:10px solid;
    border-radius: 50%;
    width: 200px;
    height: 200px; 
    background: rgb(25,240,0); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(25,240,0,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,240,0,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to top,  rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19f000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}
</style>
<head>
<body>
<div class="circle">

</div>
</body>
</html>