Przykład
powtarzając Gradient liniowy:
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} Spróbuj sam " Definicja i Wykorzystanie
repeating-linear-gradient() Funkcja ta służy do powtarzania gradienty liniowe.
| Wersja: | CSS3 |
|---|
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, który w pełni obsługuje tę funkcję.
Liczby następnie -webkit-, -moz- lub -o- określić pierwszą wersję, która pracowała z prefiksem.
| Funkcjonować | |||||
|---|---|---|---|---|---|
| repeating-linear-gradient() | 26,0 10,0 -webkit- | 10,0 | 16,0 3,6 -moz- | 6,1 5,1 -webkit- | 12,1 11,1 -o- |
Składnia CSS
background:
repeating-linear-gradient( angle | to side-or-corner , color-stop1 ,
color-stop2, ... );
| Wartość | Opis |
|---|---|
| angle | Określa kąt kierunku gradientu. Od 0deg do 360deg. Domyślnie jest to 180 stopni. |
| side-or-corner | Określa położenie punktu wyjścia linii gradientu. Składa się z dwóch słów kluczowych: pierwszy wskazuje poziomy bok, w lewo lub w prawo, a drugi pionowy z boku, góry lub od dołu. Kolejność nie ma znaczenia i każdy z kluczowych jest opcjonalna. |
| color-stop1, color-stop2,... | Kolor przystanki są kolory, które chcesz uczynić płynne przejścia między. Wartość ta składa się z wartości koloru, po opcjonalnym położeniu zatrzymania (a percentage between 0% and 100% or a length along the gradient axis) . |
Więcej przykładów
Przykład
Różne powtarzające gradienty liniowe:
#grad1 {
height: 200px;
background: -webkit-repeating-linear-gradient(45deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Opera 11.1
to 12.0 */
background: -moz-repeating-linear-gradient(45deg,red,blue
7%,green 10%); /* For Firefox 3.6 to 15 */
background:
repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* Standard syntax
(must be last) */
}
#grad2 {
height: 200px;
background: -webkit-repeating-linear-gradient(190deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* For Opera
11.1 to 12.0 */
background: -moz-repeating-linear-gradient(190deg,red,blue
7%,green 10%); /* For Firefox 3.6 to 15 */
background:
repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* Standard syntax
(must be last) */
}
#grad3 {
height: 200px;
background: -webkit-repeating-linear-gradient(90deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */
background:
-moz-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Firefox
3.6 to 15 */
background: repeating-linear-gradient(90deg,red,blue
7%,green 10%); /* Standard syntax (must be last) */
} Spróbuj sam " Podobne strony
Kurs CSS: CSS3 Gradienty
Funkcje CSS