CSS အကြောင်းရပ် အကျိုးဆက်

ကာဗား
Shadows

CSS အကြောင်းရပ် အကျိုးဆက်ရှိ

အမှတ်ပြုချက် အပေါ် အသားရှိ

CSS အကြောင်းရပ် အကျိုးဆက်

CSS အကြောင်းရပ် အကျိုးဆက်ရှိ

ဒီ ဖိုင်ပေးချက် မှာ အော်ဆိုက် အကြောင်းရပ် များ နှင့် အရာဝတ္တု အပေါ် အကြောင်းရပ် ပြုလုပ် ရန် အသုံးပြုပါ အကိုးအကားများ ကို သုံးပြုသည်：

  • text-shadow
  • box-shadow

CSS အကြောင်းရပ်

CSS text-shadow အကြောင်းရပ် အပေါ် အကြောင်းရပ် ပြုလုပ်သော အကိုးအကား

အကျယ်အဝန်း ပြုလုပ် မှု အနည်းဆုံး အကြောင်းရပ် ကို သာ အသုံးပြုပါ - ရေးချိန် အကြောင်းရပ် (2px) နှင့် အဆင်း အကြောင်းရပ် (2px)：

文字阴影效果！

实例

h1 {
  text-shadow: 2px 2px;
}

亲自试一试

နောက်ပိုင်းတွင် အကြောင်းရပ် အပေါ် အရောင် ပြုလုပ်ပါ：

文字阴影效果！

实例

h1 {
  text-shadow: 2px 2px red;
}

亲自试一试

နောက်ပိုင်းတွင် အကြောင်းရပ် အပေါ် အလေးချိန် အကြောင်းရပ် ပြုလုပ်ပါ：

文字阴影效果！

实例

h1 {
  text-shadow: 2px 2px 5px red;
}

亲自试一试

ဒီ အကြောင်းအရာ ကို ဖော်ပြချက် မှာ အနီးစပ် အကြောင်းရပ် နှင့် အစိမ်းးရောင် အကြောင်းရပ် ကို ပြသထားပါသည်：

文字阴影效果！

实例

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

亲自试一试

ဒီ အကြောင်းအရာ ကို ဖော်ပြချက် မှာ အနီးစပ် အကြောင်းရပ် များ ကို ပြသထားပါသည်：

文字阴影效果！

实例

h1 {
  text-shadow: 0 0 3px #FF0000;
}

亲自试一试

အကြောင်းရပ် အသုံးပြု

အချက်အလက် အကြောင်းရပ် များ အပေါ် အသုံးပြုရန် အကြောင်းရပ် စာရင်း ကို ခွဲခြား ကုန်ထုတ် နိုင်ပါသည်。

ဒီ အကြောင်းအရာ ကို ဖော်ပြချက် မှာ အနီးစပ် အကြောင်းရပ် များ နှင့် အစိမ်းးရောင် အကြောင်းရပ် များ ကို ပြသထားပါသည်：

文字阴影效果！

实例

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

亲自试一试

下面的例子展示了带有黑色、蓝色和深蓝色阴影的白色文本：

文字阴影效果！

实例

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

亲自试一试

您还可以使用 text-shadow 属性在文本周围创建纯边框（无阴影）：

包围文本的边框！

实例

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

亲自试一试