repeating-radial-gradient()
- Data publikacji
- Ostatnio edytowano
Zobacz również: w3.org - the repeating-radial-gradient notation (LV3)
Przeznaczenie funkcji repeating-radial-gradient()
Za pomocą funkcji repeating-radial-gradient()
możemy utworzyć obrazek w postaci powtarzającego się gradientu promienistego.
Parametry funkcji repeating-radial-gradient()
- Przykładowe zapisy
-
repeating-radial-gradient(red, gold)
repeating-radial-gradient(ellipse, red 0%, gold 50%)
repeating-radial-gradient(ellipse 100px 50px, red 0%, gold 50%)
repeating-radial-gradient(circle closest-corner, red 0%, gold 50%)
repeating-radial-gradient(circle 50px at left bottom, red 0%, gold 100%)
repeating-radial-gradient(ellipse 25% 10% at -25px 60px, red 0%, gold 100%)
- shape
-
Parametr
shape
nie jest wymaganym parametrem funkcjirepeating-radial-gradient()
. Parametrshape
określa kształt, jaki powinien posiadać nowo powstający powtarzający się gradient promienisty.Dostępne wartości parametru
shape
- circle
-
Wartość
circle
parametrushape
określa okrągły kształt dla nowo powstającego powtarzającego się gradientu promienistego. - ellipse
-
Wartość
ellipse
parametrushape
określa eliptyczny kształt dla nowo powstającego powtarzającego się gradientu promienistego.
- size
-
Parametr
size
nie jest wymaganym parametrem funkcjiradial-gradient()
. Parametrsize
określa rozmiar promienia lub promieni nowo powstającego powtarzającego się gradientu promienistego.Dodatkowe dostępne wartości parametru
size
- closest-side
-
Wartość
closest-side
parametrusize
sprawia, że rozmiarem promienia lub promieni nowo powstającego powtarzającego się gradientu promienistego będzie długość od środka nowo powstającego powtarzającego się gradientu promienistego do najbliżej położonej krawędzi obszaru, w którym tworzy się nowo powstający powtarzający się gradient promienisty. - farthest-side
-
Wartość
farthest-side
parametrusize
sprawia, że rozmiarem promienia lub promieni nowo powstającego powtarzającego się gradientu promienistego będzie długość od środka nowo powstającego powtarzającego się gradientu promienistego do najdalej położonej krawędzi obszaru, w którym tworzy się nowo powstający powtarzający się gradient promienisty. - closest-corner
-
Wartość
closest-corner
parametrusize
sprawia, że rozmiar promienia lub promieni nowo powstającego powtarzającego się gradientu promienistego będzie uzależniony od środka nowo powstającego powtarzającego się gradientu promienistego oraz od najbliżej położonego rogu obszaru, w którym tworzy się nowo powstający powtarzający się gradient promienisty. - farthest-corner
-
Wartość
farthest-corner
parametrusize
sprawia, że rozmiar promienia lub promieni nowo powstającego powtarzającego się gradientu promienistego będzie uzależniony od środka nowo powstającego powtarzającego się gradientu promienistego oraz od najdalej położonego rogu obszaru, w którym tworzy się nowo powstający powtarzający się gradient promienisty.
- position
-
Parametr
position
nie jest wymaganym parametrem funkcjirepeating-radial-gradient()
. Parametrposition
określa miejsce, gdzie powinien znaleźć się środek nowo powstającego powtarzającego się gradientu promienistego. - color
-
Parametr
color
jest wymaganym parametrem funkcjirepeating-radial-gradient()
. Parametrcolor
określa jeden z kolorów, który powinien tworzyć nowo powstający powtarzający się gradient promienisty. - stop
-
Parametr
stop
nie jest wymaganym parametrem funkcjirepeating-radial-gradient()
. Parametrstop
określa miejsce, od którego lub do którego powinien zmieniać swoją barwę kolor, który podaliśmy przed danym parametremstop
.
Występowanie funkcji repeating-radial-gradient()
Przykład funkcji repeating-radial-gradient()
background-image:repeating-radial-gradient(circle 75px at bottom, red 0%, orange 50%, yellow 100%);
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:repeating-radial-gradient(circle 75px at bottom, red 0%, orange 50%, yellow 100%);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
do obszaru tła tego elementu "div" został dodany obrazek w postaci powtarzającego się gradientu promienistego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "repeating-radial-gradient()", w której to funkcji zostały użyte następujące wartości: "circle 75px at bottom, red 0%, orange 50%, yellow 100%"
</div>
</body>
</html>
Interpretacja funkcji repeating-radial-gradient()
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 10
-
tak
Zobacz więcej informacji o interpretacji funkcji repeating-radial-gradient().