CSS Box Shadow

စီစ်စက် စာရင်း box-shadow အချက်အလက်

CSS box-shadow အကျုံးစည်း အရာများ အတွက် အမှုန်းကို သုံးစွဲပါ

အကူးအညီဆုံး အသုံးပြုခြင်းကြောင်း၊ အခြေအနေနှင့် အလွှားသော အမှုန်းကို သာ သတ်မှတ်ပါ:

အစီးရောင်ရှိသော <div> အရာများ၊ အမှုန်းရှိ

实例

div {
  box-shadow: 10px 10px;
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

နောက်ပိုင်း၌၊ အမှုန်းကို အရောင်ပေးပါ:

အစီးရောင်ရှိသော <div> အရာများ၊ grey အမှုန်းရှိ

实例

div {
  box-shadow: 10px 10px grey;
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

နောက်ပိုင်း၌၊ အလွှားသော အမှုန်းကို အလွှားပုံစံပေးပါ:

အစီးရောင်ရှိသော <div> အရာများ၊ အလွှားသော box-shadow

实例

div {
  box-shadow: 10px 10px 5px grey;
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ဝတ်ဆင်မှု

သင် လည်း အသုံးပြုနိုင်သည်: box-shadow သုတ်စွဲမှုများ စာလုံး ဝတ်ဆင်မှုကြောင်း:

1
January 1, 2021
ကျွန်းကင်နှင့်
ကျွန်းကင်နှင့်

实例

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

亲自试一试：纸卡片亲自试一试：图像卡片

CSS 阴影属性

下表列出了 CSS 的阴影属性：

属性 描述
box-shadow 向一个元素添加一个或多个阴影。
text-shadow 在文本中添加一个或多个阴影。