丸みを帯びた影を作成するには？

Question

何度もシンプルなシャドウを作成しましたが、丸みのあるシャドウを作成する必要があります。写真のように

CSSでこれを行うことはできますか？

これは私のコードです：

-webkit-box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75); 
-moz-box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75); 
box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75); 

Answer 1

あなたの例の画像はラウンドコンテナ内の直線勾配であるので、それを行うように見えます：擬似付き

.round-shadow-clip { 
 
    overflow: hidden; 
 
} 
 

 
.round-shadow { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.6)); 
 
    border-radius: 100%; 
 
    height: 0; 
 
    margin-left: -10%; 
 
    padding-bottom: 25%; 
 
    width: 120%; 
 
} 
 

 
html { 
 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAALklEQVQ4y2N89+4dA24gKCiIR5aJgQIwqnlkaGb8//8/Hun379+PBtioZko0AwAA0Ajuvut+RAAAAABJRU5ErkJggg'); 
 
    height: 100%; 
 
}

<div class="round-shadow-clip"> 
 
    <div class="round-shadow"></div> 
 
</div>

Answer 2

あなたはこれを行うことができます

div { 
 
    position: relative; 
 
    height: 100px; 
 
    border-radius: 50%/40%; 
 
    overflow: hidden; 
 
} 
 
div::before, 
 
div::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left:0; right:0; top: -5px; height: 0; 
 
    box-shadow: 0 0 25px 15px rgba(0,0,0,.5); 
 
} 
 
div::after { 
 
    top: auto; bottom: -5px; 
 
    box-shadow: 0 0 -25px 15px rgba(0,0,0,.5); 
 
}

<div></div>