CSS repeating-linear-gradient() ఫంక్షన్

నిర్వచనం మరియు వినియోగం

CSS repeating-linear-gradient() పునరావృతమైన లీనియర్ గ్రేడియంట్‌కు వినియోగించే ఫంక్షన్

ప్రతీరుదారు:

లీనియర్ గ్రేడియంట్ పునరావృతమైన లీనియర్ గ్రేడియంట్
linear-gradient(red, yellow, blue); repeating-linear-gradient(red, yellow 10%, blue 20%);

ప్రతీరుదారు

例子 1

一个重复的线性渐变：

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

亲自试一试

例子 2

不同的重复线性渐变：

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

亲自试一试

CSS 语法

repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
值 描述
angle 定义渐变的方向角度。从 0deg 到 360deg。默认值为 180deg。
side-or-corner

定义渐变线起点的位置。

它由两个关键字组成：第一个表示水平方向（left 或 right），第二个表示垂直方向（top 或 bottom）。

క్రమం ముఖ్యము కాదు మరియు ప్రతి ఒక్క కీలక పదం ఆప్షనల్ ఉంటుంది.
color-stop1, color-stop2,...

రంగు ముగింపులు మీరు అందించదానికి కావలసిన రంగులను ప్రదర్శించే విధంగా ఉంటాయి.

ఈ విలువ రంగు విలువలను మరియు ఒకటి లేదా రెండు ఆప్షనల్ స్టాప్ స్థానాలను (0% నుండి 100% మధ్య శాతం లేదా గ్రేడియంట్ అక్షం పై పొడవు) కలిగి ఉంటుంది.

సాంకేతిక వివరాలు

వెర్షన్: CSS Images Module Level 3

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ ఫంక్షన్ ను పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ నిర్ధారిస్తాయి.

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
repeating-linear-gradient()
26 10 16 6.1 12.1
రెండు స్థానాల రంగు ముగింపులు
71 79 64 12.1 58

సంబంధిత పేజీలు

శిక్షణా కార్యక్రమం:CSS గ్రేడియంట్

参考：CSS background-image 属性

参考：CSS conic-gradient() ఫంక్షన్

参考：CSS linear-gradient() ఫంక్షన్

参考：CSS radial-gradient() ఫంక్షన్

参考：CSS రీపీటింగ్-కానిక్-గ్రాడియెంట్() ఫంక్షన్

参考：CSS రీపీటింగ్-రేడియల్-గ్రాడియెంట్() ఫంక్షన్