Radial Gradient ng CSS

Radial Gradient ng CSS

Ang radial gradient ay tinutukoy ng sentro nito.

Para makapaglunsad ng radial gradient, dapat mo ring maglagay ng kahit anong dalawang color stop.

Grammar

background-image: radial-gradient(shape size at position, start-color, ... , last-color);

ng default,shape sa hugis na elipso,size sa pinakamalayo na sulok,position sa gitna.

Radial gradient - equal spacing of color stops (default)

Ang mga halimbawa sa ibaba ay nagpapakita ng isang radial gradient na may equal spacing ng mga color stop:

Example

#grad {
  background-image: radial-gradient(red, yellow, green);

Try It Yourself

Radial gradient - iba't ibang pagkakaiba ng pagitan ng mga color stop

Ang mga halimbawa sa ibaba ay nagpapakita ng isang radial gradient na may iba't ibang pagkakaiba ng pagitan ng mga color stop:

Example

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);

Try It Yourself

Nagset ng hugis

shape Ang mga parameter ay nagtutukoy sa hugis. Maaaring tumanggap ng halaga na circle o ellipse. Ang default ay ellipse (ellipse).

Ang mga halimbawa sa ibaba ay nagpapakita ng isang circular na radial gradient:

Example

#grad {
  background-image: radial-gradient(circle, red, yellow, green);

Try It Yourself

Ginagamit ang iba't ibang keyword ng laki

size Ang mga parameter ay nagtutukoy sa laki ng gradient. Maaaring tumanggap ng apat na halaga:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Example

Nagset ng iba't ibang size ng keyword na radial gradient:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);

Try It Yourself

Repeating Radial Gradient

repeating-radial-gradient() The function used for repeating radial gradients:

Example

Repeating Radial Gradient:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

Try It Yourself

CSS Gradient Properties

The following table lists CSS gradient properties:

Attribute Description
background-image Set one or more background images for an element.