CSS图像周围的阴影/亮度

Question

我有一个使用CSS创建的圆圈，如下所示：

.circle {
    width: 40px;
    height: 40px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    color: #555555;
    line-height: 40px;
    font-weight: bold;
    border: 4px solid #333;
}

如何使用CSS在此圆圈周围创建阴影/亮度，如下面的示例图片所示？

提前致谢！

Answer 1

box-shadow就是你想要的。将其添加到.circle类：

box-shadow: 0 0 30px #FFE8AE;

有关各种属性的详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow。

Answer 2

您可以使用尊重border-radius属性的box-shadow属性。

像这样jsFiddle

box-shadow: 0 0 1em #FFD800;

Answer 3

尝试box-shadow属性：

box-shadow:0px 0px 10px 10px #faa;

<强> jsFiddle example