Thay đổi màu tăng dần

Question

#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; 
} 

Điều này thật khó xử, đặc biệt nếu bạn thêm 20 trẻ khác. Có thể sử dụng một cái gì đó như thế này, cho ăn calc() vị trí và sử dụng nó trong rgb()?

Có cách nào khác để thực hiện việc này không? (? counter())

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

Các chương trình sau đây hứa hẹn nhưng tôi không nghĩ rằng rgb() chấp nhận một nội 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); 
} 

Answer 1

Vì bạn chưa nói rằng bạn muốn có giải pháp CSS duy nhất, tôi khuyên bạn nên sử dụng giải pháp dựa trên 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; 
} 

Đoạn mã trên tạo này:

#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; 
} 

Answer 2

Hoặc sử dụng JS hoặc một trong các tùy chọn được đề xuất bởi pradeek. Hiện tại, không có cách nào để sử dụng các biến trong ngôn ngữ mẹ đẻ của CSS, nếu không phải bằng cách sử dụng counter-reset và counter-increment, nhưng sau đó bạn phải sử dụng chúng cùng với content và điều đó sẽ thay đổi nội dung được hiển thị bên trong phần tử đó. như các biến để sử dụng cho các hoạt động.

Read here hoặc here để hiểu tại sao các biến không phù hợp với CSS.

Answer 3

Firefox 31+ hay 29+ (chiều rộng options) vấn đề (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); 
} 

Như @Jose nói, counter chức năng sử dụng chỉ cho content tài sản. Nhưng vars hiện đã được bật trong CSS. Chrome và Firefox có cú pháp khác nhau. Có hai thông số kỹ thuật của W3C CSS Variables Module Level 1 (triển khai Chrome) và CSS Custom Properties for Cascading Variables Module Level 1 (triển khai Firefox).

Answer 4

Với jQuery bạn có thể làm như sau khi trang web được tải:

$(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)"); 
    } 
}); 

Xem jsfiddle với 4 children và với 20 children

Answer 5

Nhìn vào giá trị hex của bạn, bạn là chủ yếu chỉ thay đổi màu sắc bằng cách 8 mỗi lần. tức là:

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

v.v.

Vì vậy, đây là cách bạn sẽ đi về việc này trong LESS:

@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

Các codepen trên sẽ giả định một cái gì đó đánh dấu như vậy (5 trẻ em):

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

và tạo CSS sau:

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; 
}