[分享]css3怎么给圆添加投影

CSS3中为圆添加投影效果有多种方式，可以使用box-shadow属性、filter属性和伪类元素等方法来实现。

/* 使用box-shadow属性 */
.circle{
    width:100px;
    height:100px;
    border-radius:50%;
    box-shadow:5px 5px 5px rgba(0,0,0,0.3);
}

/* 使用filter属性 */
.circle{
    width:100px;
    height:100px;
    border-radius:50%;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}

/* 使用伪类元素 */
.circle{
    position:relative;
    width:100px;
    height:100px;
    border-radius:50%;
}
.circle::after{
    content:"";
    position:absolute;
    top:5px;
    left:5px;
    width:100%;
    height:100%;
    border-radius:50%;
    box-shadow:5px 5px 5px rgba(0,0,0,0.3);
    z-index:-1;
} 

使用box-shadow属性和filter属性可以直接在圆形元素上添加投影效果，其中box-shadow属性支持多个阴影效果、可以设置阴影的位置、大小、模糊程度、颜色等属性，而filter属性则可以添加各种滤镜效果，包括drop-shadow投影效果。

使用伪类元素的方法则是通过在元素内部添加一个同样大小的圆形元素，并在其上添加投影效果，然后将其放置在原来的圆形元素下方，从而实现投影效果。