更改顏色逐漸

#mainbody :nth-child(1){ 
    border-color: #FFCC00; 
} 
#mainbody :nth-child(2) { 
    border-color: #FFAA00; 
} 
#mainbody :nth-child(3) { 
    border-color: #FF8800; 
} 
#mainbody :nth-child(4) { 
    border-color: #FF6600; 
}

這是尷尬的，特別是如果你添加其他20個孩子。是否有可能使用這樣的東西，飼餵calc()的位置，並使用它在rgb()？更改顏色逐漸

是否有另一種方法呢？（？counter()）

#mainbody h2 { 
    border-color: rgb(255, calc(255/(childposition/4)) ,0); 
}

下面顯示的承諾，但我不認爲rgb()接受內部counter()：

body { 
    counter-reset: headcolors 255; 
} 
h2:after { 
    counter-increment: headcolors -34; 
    content: "rgb(255," counter(headcolors) ",0);"; 
} 
h2 { 
    counter-increment: headcolors -34; 
    color: rgb(255,counter(headcolors),0); 
}

來源

2011-11-25 J V

退房[更少]（http://lesscss.org/）或[SASS（http://sass-lang.com/） – pradeek

你能使用更少？ –

既然你還沒有說你想要一個只有CSS的解決方案，我會建議你使用基於SASS/LESS的解決方案。

http://sassmeister.com/gist/925757ff999824ec0270

$baseColor: #FFCC00; 

@for $i from 1 to 5 { 
    #mainbody :nth-child(#{$i}) { 
     border-color: adjust-color($baseColor, $green: ($i - 1) * 1); 
    } 
    $i: $i + 1; 
}

上面的代碼生成此：

#mainbody :nth-child(1) { 
    border-color: #ffcc00; 
} 

#mainbody :nth-child(2) { 
    border-color: #ffcd00; 
} 

#mainbody :nth-child(3) { 
    border-color: #ffce00; 
} 

#mainbody :nth-child(4) { 
    border-color: #ffcf00; 
}

來源

2014-06-30 09:00:28 Aniket

要麼使用JS或由pradeek建議的選項之一。到目前爲止，如果不是使用counter-reset和counter-increment，那麼就沒有辦法在CSS本地語言中使用變量，但是隨後您必須將它們與content一起使用，並且這會改變元素內顯示的內容，它們不會被處理作爲用於操作的變量。

Read here或here瞭解變量不符合CSS的原因。

來源

2011-11-25 16:03:52

好吧，謝謝 –

火狐31+ 29+或（寬度options）問題（fiddle）：

HTML：

<div> 
    <p><p><p><p> 
</div>

CSS：

::root { 
    --bg-color: #000000; 
} 

div :nth-child(1){ 
    --bg-color: #FFCC00; 
} 
div :nth-child(2) { 
    --bg-color: #FFAA00; 
} 
div :nth-child(3) { 
    --bg-color: #FF8800; 
} 
div :nth-child(4) { 
    --bg-color: #FF6600; 
} 

p { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    background: var(--bg-color); 
}

正如@Jose說，僅用於content財產counter功能。但現在在CSS中啓用了vars。 Chrome和Firefox具有不同的語法。有兩個規格W3C CSS Variables Module Level 1（Chrome實施）和CSS Custom Properties for Cascading Variables Module Level 1（Firefox實施）。

來源

2014-07-02 08:09:09 Pinal

使用jQuery當頁面加載，你可以做到以下幾點：

$(document).ready(function(){ 
    var startfrom = 204; // CC in Hex, the starting value for the green color 
    var endto = 255 - startfrom; // the ending value for the green color 
    var limit = 4; 
    for(var i = 1; i <= limit; i++) 
    { 
     $("#mainbody :nth-child("+i+")").css("border-color", "rgb(255,"+Math.round(startfrom - (startfrom - endto)*(i-1)/(limit-1))+",0)"); 
    } 
});

見與4 children的的jsfiddle與20 children

來源

2014-07-02 10:47:42 clami219

你可能會考慮取消'：從這個第n-child'，彷彿它是可以避免的，你可以在IE8及以下我相信使用。方面說明，已經授予賞金，儘管我做了讚揚。 – xenoterracide

你的十六進制值看，你基本上只是通過改變色相每次8次。即：

#ffcc00 = HSL: 48° 100% 50% 
#ffaa00 = HSL: 40° 100% 50% 
#ff8800 = HSL: 32° 100% 50%

等。

所以這是你將如何去在不到這樣做：

@base: #ffcc00; 
@numChildren: 5; 
.loop(@counter, @color) when (@counter <= @numChildren) { 

    h2:nth-child(@{counter}) { 
    border: 5px solid @color; 
    } 
    @newColor: hsl(hue(@color) - 8, 100%, 50%); 
    .loop((@counter + 1),@newColor); // next iteration 
} 
.loop(1,@base); // launch the loop

CODEPEN

以上codepen將承擔標記的東西，像這樣（5歲以下兒童）：

<div class="mainBody"> 
    <h2>one</h2> 
    <h2>two</h2> 
    <h2>three</h2> 
    <h2>four</h2> 
    <h2>five</h2> 
</div>

，併產生下列CSS：

h2:nth-child(1) { 
    border: 5px solid #ffcc00; 
} 
h2:nth-child(2) { 
    border: 5px solid #ffaa00; 
} 
h2:nth-child(3) { 
    border: 5px solid #ff8800; 
} 
h2:nth-child(4) { 
    border: 5px solid #ff6600; 
} 
h2:nth-child(5) { 
    border: 5px solid #ff4400; 
}

來源

2014-07-02 12:01:24 Danield

更改顏色逐漸

回答

相關問題