.toolbar { @color: #914; @lighten: lighten(@color, 3%); @darken: darken(@color, 3%); background-color: @color; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken)); background-image: -webkit-linear-gradient(top, @lighten, @darken); background-image: -moz-linear-gradient(top, @lighten, @darken); background-image: -ms-linear-gradient(top, @lighten, @darken); background-image: -o-linear-gradient(top, @lighten, @darken); background-image: linear-gradient(to bottom, @lighten, @darken); }
上面除了用 linear-gradient 來產生漸層,額外還加上了 background-color 這個保險,讓不支援 CSS3 的 browser 也能有基本的底色。
這樣寫還是有點麻煩,如果包成 mixin 會更方便,如下:
.bg-vertical-gradient(@color, @amount:3%) { @lighten: lighten(@color, @amount); @darken: darken(@color, @amount); background-color: @color; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken)); background-image: -webkit-linear-gradient(top, @lighten, @darken); background-image: -moz-linear-gradient(top, @lighten, @darken); background-image: -ms-linear-gradient(top, @lighten, @darken); background-image: -o-linear-gradient(top, @lighten, @darken); background-image: linear-gradient(to bottom, @lighten, @darken); } .toolbar { .bg-vertical-gradient(#914); } .banner { .bg-vertical-gradient(#702, 5%); }
0 回應:
張貼留言