多個漸變和徑向漸變與中心外的元素

Question

是否有可能獲得與CSS漸變類似的結果？你可以在一個div上使用2個漸變，並且徑向上的div在div之外有中心嗎？

Answer 1

什麼這是絕對有可能通過逗號爲他們提供一個以上的梯度添加到一個元素（即使是線性和徑向漸變的組合）分隔格式像下面的片段。首先指定的漸變（從右側）形成最底層，而最後指定的漸變最頂層。關鍵要注意的是，漸變（頂部）必須具有alpha小於1的顏色才能夠顯示較低層中的顏色。

即將出現問題的第二部分，可以創建徑向漸變，使其中心點位於div之外。這可以通過爲position指定負值來完成。

以下代碼片段中的漸變與所提供的圖片不完全一致，但您可以瞭解這一想法。

div{ 
 
    height: 200px; 
 
    width: 150px; 
 
    border: 1px solid; 
 
    border-radius: 12px; 
 
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7)), radial-gradient(ellipse at -40% -50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.7) 50%); 
 
    background-size: 180% 200%; 
 
}

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

Answer 2

試試這個

.color background: rgba(249,124,102,1); 
    background: -moz-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%); 
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(249,124,102,1)), color-stop(50%, rgba(246,160,147,1)), color-stop(51%, rgba(248,85,63,1)), color-stop(71%, rgba(243,93,73,1)), color-stop(100%, rgba(236,98,85,1))); 
    background: -webkit-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%); 
    background: -o-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%); 
    background: -ms-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%); 
    background: linear-gradient(135deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f97c66', endColorstr='#ec6255', GradientType=1); 
} 

    .rounded_rec { 
    width: 150px; 
    height: 150px; 
    border-radius: 5px; 
    border: 1px solid red; 
    background-color: black; 
    } 

的Html

<div class="rounded_rec color"> 
</div> 

請檢查該link

入住這link也

檢查這個link，讓我知道這是你想要