Funksheni CSS radial-gradient()

上一页 Faaingo pow() katika CSS
下一页 Faaingo ray() katika CSS
返回上一层 Kitabu cha matokeo cha maadili ya CSS

Ufafanuzi na matumizi

CSS radial-gradient() Funksheni inasaidia kumekadiri kipimo cha mabara kwenye uwezo wa kumekana kama picha ya mabara.

Kipimo cha mabara kwenye uwezo wa kumekana kinasimuliwa na kiwango chake cha kuzingatia.

Kumekadiri kipimo cha mabara kwenye uwezo wa kumekana, inahitajika kumekadiri mabara mbili kwenye ukubwa.

Mfano wa kipimo cha mabara kwenye uwezo wa kumekana:

Mifano

Mfano 1

Mfano wa kipimo cha mabara kwenye uwezo wa kumekana:

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

Mfano wa kusafiri

Mfano 2

Mfano wa kipimo cha mabara kwa jumla kwenye uwezo wa kumekana:

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

Mfano wa kusafiri

例子 3

圆形形状的径向渐变：

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

Mfano wa kusafiri

例子 4

使用不同大小关键词的径向渐变：

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

Mfano wa kusafiri

Inasababu ya CSS

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

Inaneni	Maelezo
shape	Kuamua muungano wa muungano. Inaonekana kama: ellipse (msingi) circle
size	Kuamua ukubwa wa muungano. Inaonekana kama: farthest-corner (msingi) closest-side closest-corner farthest-side
position	Kuamua uwanja wa muungano. Msingi ni "center".
start-color, ... , last-color	Vibweni vya rangi ni kwa uwanja ambao unafikia rangi ya kushika kwa rangi. Inaonekana kama kiwango cha rangi, ikifuata na uwanja wa kiwango cha kiwango cha kina kiwango cha kina cha rangi (pewa 0% hadi 100% au kiwango cha msaada cha msaada wa msaada).