在CSS3

Question

增加圈的大小在徑向漸變我有我的梯度下面的CSS規則：

background-image: radial-gradient(circle at top right, rgb(237, 241, 254), rgb(195, 253, 237)); 

我只是想知道如果我能以某種方式增加包含第一種顏色的圓圈的大小。看起來顏色只限於一個小區域。這可能嗎？

乾杯

Answer 1

我可能會找到一個解決方案適合您，請看到這兩個片段：

1段只是比較：

div { 
 
    background: rgb(173, 217, 228); 
 
    /* Old browsers */ 
 
    background: -moz-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%); 
 
    /* FF3.6+ */ 
 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(173, 217, 228, 1)), color-stop(75%, rgba(217, 237, 242, 1)), color-stop(100%, rgba(247, 251, 252, 1))); 
 
    /* Chrome,Safari4+ */ 
 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%); 
 
    /* Chrome10+,Safari5.1+ */ 
 
    background: -o-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%); 
 
    /* Opera 12+ */ 
 
    background: -ms-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%); 
 
    /* IE10+ */ 
 
    background: radial-gradient(ellipse at center, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%); 
 
    /* W3C */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#add9e4', endColorstr='#f7fbfc', GradientType=1); 
 
    /* IE6-9 fallback on horizontal gradient */ 
 
    height: 400px 
 
}

<div></div>

與右/左更大的圓第二片段 - 頂部/底部

div { 
 
    background: rgb(173, 217, 228); 
 
    /* Old browsers */ 
 
    background: -moz-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%); 
 
    /* FF3.6+ */ 
 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(173, 217, 228, 1)), color-stop(60%, rgba(217, 237, 242, 1)), color-stop(100%, rgba(247, 251, 252, 1))); 
 
    /* Chrome,Safari4+ */ 
 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%); 
 
    /* Chrome10+,Safari5.1+ */ 
 
    background: -o-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%); 
 
    /* Opera 12+ */ 
 
    background: -ms-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%); 
 
    /* IE10+ */ 
 
    background: radial-gradient(ellipse at center, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%); 
 
    /* W3C */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#add9e4', endColorstr='#f7fbfc', GradientType=1); 
 
    /* IE6-9 fallback on horizontal gradient */ 
 
    height:400px; 
 
}

<div></div>

從第一到第二片段不同的是位置：

• 1st has 75% or color-stop(75%
• 2nd有60%或color-stop(60%