如何使用漸變和陰影在底部創建帶圓圈的背景

Question

任何人都可以幫助我實現此標題佈局而不使用陰影圖像嗎？

Answer 1

這不是不可能實現的CSS。您只需要查看該圖像的不同層，然後使用background-image重新創建每個圖層。該圖像有三個不同的層。最底層是一個傾斜的線性漸變，從較暗的藍色到較淺的顏色（從左下角到右上角）。第二個是圓形放射狀漸變，通過在底層頂部疊加從白色到透明的漸變產生輝光，第三種是產生灰色陰影的另一徑向漸變（橢圓）。通過創建圖層並將它們添加到元素中，我們可以獲得所需的輸出。

形狀的彎曲底部可以通過使用在X和Y軸上具有不同半徑的border-radius來生成。

.shape { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.shape:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 110%; 
 
    height: 100%; 
 
    left: -5%; 
 
    border-radius: 0% 0% 150% 150%/0% 0% 60% 60%; 
 
    background: radial-gradient(ellipse at 50% 160%, rgba(127, 127, 127, 0.75), rgba(127, 127, 127, 0) 40%), radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 40%), linear-gradient(45deg, rgb(43, 149, 241), rgb(136, 208, 249)); 
 
    background-size: 100% 40%, 100% 100%, 100% 100%; 
 
    background-position: 0% 100%, 0% 0%, 0% 0%; 
 
    background-repeat: no-repeat; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div class='shape'></div>