CSS linear-gradient() ပုံစံအကြောင်း

သတ်မှတ်နှင့် အသုံးပြုခြင်း

CSS linear-gradient() အဓိပ္ပာယ် ပြောင်းလဲသည်

အဆိုင်းပြောင်းကို ဖန်တီးရန် အရောင်လက္ခဏာအနည်းဆုံး ၂ ခုကို သတ်မှတ်ပါကြောင်း။ အရောင်လက္ခဏာ သည် သင့်တားမူးလျှင် အဆိုင်းပြောင်းမှ သဘောကို ပြောင်းလဲသော အရောင်ဖြစ်သည်။ သင် အစိတ်အစိတ်အဆိုင်းပြောင်းကို သတ်မှတ်နိုင်ပါသည်။

အဆိုင်းပြောင်းလေးလုံး အကြောင်းအရာ:

အကြောင်းကြောင်း

အမှတ် 1 အကြောင်းအရာ

အဆိုင်းပြောင်းမှ အမြောက်စိုက်အခြေစိုက်မှ စတင်သည်။ အကြီးကြီးအရောင်မှ အနီးအနားအရောင်သို့ ပြောင်းလဲသည်:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

亲自试一试

အမှတ် 2 အကြောင်းအရာ

အရှေ့မှစတင်သော အဆိုင်းပြောင်း။ အကြီးကြီးအရောင်မှ အနီးအနားအရောင်သို့ ပြောင်းလဲသည်:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

亲自试一试

အမှတ် 3 အကြောင်းအရာ

အရှေ့မြောက်အခြေစိုက် (နှင့် အရှေ့မြောက်အခြေစိုက်မှ အရှေ့တောင်အခြေစိုက်ထိ ဖြည့်ဖြည့်ပြောင်းလဲသော) အဆိုင်းပြောင်း:

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

亲自试一试

အမှတ် 4 အကြောင်းအရာ

အားစားသောအဆိုင်းပြောင်းကိုကူညီထားသော အဆိုင်းပြောင်း:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

亲自试一试

အမှတ် 5 အကြောင်းအရာ

ပေါ်ပေါ်အရောင်လက္ခဏာပါဝင်သော အဆိုင်းပြောင်းသည့်လေးလုံးအဆိုင်းပြောင်း:

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

亲自试一试

例子 6

一个具有两个位置色标的线性渐变：

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

亲自试一试

例子 7

一个具有透明度的线性渐变：

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

亲自试一试

CSS 语法

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);
值 描述
side-or-corner

可选。渐变的起点。以关键字“to”开始，后接最多两个其他关键字：

  • left 或 right
  • top 或 bottom

默认值为 to bottom（到底部）。
angle

可选。渐变线的方向角度：

  • 0deg 等于：to top（到顶部）
  • 180deg 等于：to bottom（到底部）
  • 270deg 等于：to left（到左侧）
  • 90deg 等于：to right（到右侧）
color-stop1, color-stop2,...

必需。色标是您希望在其间实现平滑过渡的颜色。

这个值由一个颜色值组成，后接一个可选的一个或两个位置的色标（在 0% 到 100% 之间的百分比或沿渐变轴的长度）。

技术细节

版本： CSS3

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
linear-gradient()
26 10 16 6.1 12.1
两个位置的色标
71 79 64 12.1 58

相关页面

教程：CSS 渐变

参考：CSS အသံ အပြင် ပုံ

参考：CSS conic-gradient() 函数

参考：CSS radial-gradient() 函数

参考：CSS repeating-conic-gradient() 函数

参考：CSS repeating-linear-gradient() 函数

参考：CSS repeating-radial-gradient() 函数