CSS ယဉ်ကျေးမှု

CSS ယဉ်ကျေးမှု ကို စစ်ဆေးပါ

နှံ့ထောင့် ယဉ်ကျေးမှု

အသုံးပြုပါ: border-radius border-radius ဗီယက်နီ ကို အစိတ်အစိတ်အပြုအပြူအဖြစ် စစ်ဆေးပါ:

အမျိုး

နှံ့ထောင့် ယဉ်ကျေးမှု:

img {
  border-radius: 8px;
}

亲自试一试

အမျိုး

ဆင်းယောက် ယဉ်ကျေးမှု:

img {
  border-radius: 50%;
}

亲自试一试

သတင်းများ ယဉ်ကျေးမှု

အသုံးပြုပါ: ဘလက်ပ်သား ဗီယက်နီ ကို အစိတ်အစိတ်အပြုအပြူအဖြစ် စစ်ဆေးပါ:

သတင်းများ:

Coffee

အမျိုး

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

亲自试一试

လိုလျှင် ချွတ်ဆိပ် သတင်းများ အဖြစ်:

အမျိုး

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

亲自试一试

ယဉ်ကျေးမှု

ယဉ်ကျေးမှု ကို ပုံမှန် ဖြင့် ဖော်ပြသည်

ယဉ်ကျေးမှု ကို လို့လျှင် ကြီးတက်စေသည့် မပါဝင်သဖြင့် အခြေအနေ အရ ကျသည့် ယဉ်ကျေးမှု ကို ထပ်ပေါင်းပါ:

အမျိုး

img {
  max-width: 100%;
  height: auto;
}

亲自试一试

提示：ကျွန်းစီးပွား CSS RWD 教程 တိကျသော အကယ်၍ လူသိများစွာ ကို သင်ယူကြည့်ရန်

ယုံးကြောင်းပြီး ယဉ်ကျေးမှု

ယုံးကို အတိုင်းပြီး ကြောင်းသွားသည့် ယဉ်ကျေးမှု အား စစ်ဆေးပါ: auto ထိုကို ဘလက်ပ်သား အစိတ်အစိတ်အပြုအပြူအဖြစ် စစ်ဆေးပါ:

Coffee

အမျိုး

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

亲自试一试

ဘိုလီယာ ယဉ်ကျေးမှု / စာကြည့်

Tulip

ပြင်းစီးပွာ�

Tulip

ကျွန်းစီးပွား

အမျိုး

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
  text-align: center;
  padding: 10px 20px;
}

亲自试一试

透明图像

opacity 属性的取值范围为 0.0 - 1.0。值越低，越透明：

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1（默认）

အမျိုး

img {
  opacity: 0.5;
}

亲自试一试

图像文本

如何在图像中定位文本：

အမျိုး

CodeW3C.com Logo
Bottom Left
Top Left
Top Right
Bottom Right
Centered

亲自试一试：

左上 右上 左下 右下 居中

图像滤镜

CSS filter 属性把视觉效果（如模糊和饱和度）添加到元素。

注意：Internet Explorer 或 Edge 12 不支持 filter 属性。

အမျိုး

把所有图像的颜色更改为黑白（100％ 灰色）：

img {
  filter: grayscale(100%);
}

亲自试一试

提示：请访问我们的 CSS 滤镜参考手册，了解有关 CSS 滤镜的更多信息。

图像悬停叠加

创建鼠标悬停时的叠加效果：

实例 1

淡入文本：

Avatar
Hello World

亲自试一试

实例 2

淡入框：

Avatar
Bill

亲自试一试

实例 3

滑入（上）：

Avatar
Hello World

亲自试一试

实例 4

သက်ဆိုင်ရာ ဘက်အောက် ပျံ့နှံ့ပါ

Avatar
Hello World

亲自试一试

အမျိုး 5

သက်ဆိုင်ရာ ဘက်အတွင်း ပျံ့နှံ့ပါ

Avatar
Hello World

亲自试一试

အမျိုး 6

သက်ဆိုင်ရာ ဘက်အတွင်း ပျံ့နှံ့ပါ

Avatar
Hello World

亲自试一试

ပုံအား ချို့ပါ

ပုံပေါ်သို့ မီးလည်ပါ။

အားကစားပန်းတော်

အမျိုး

img:hover {
  transform: scaleX(-1);
}

亲自试一试

ကျွမ်းကျွမ်းသော ယူနီယံအချုပ်

ကျွန်ုပ်တို့သည် ကျွမ်းကျွမ်းသော ကျွမ်းကျွမ်းသော ယူနီယံအချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား အချုပ်အခြား စာကြိုးစားပါ။

ဤအမျိုးတွင် မီဒီယာကို အသုံးပြု၍ မျက်နှာပြင်အရွယ်အစားများအတွက် ယူနီယံကို ပြန်လည်ပြင်ဆင်ပြီး လုပ်ဆောင်သည်။ ဘတ်သျှားအရွယ်အစားကို ပြင်ဆင်ပြီး အကျိုးသက်ရောက်မှုကို ကြည့်ချင်ပါက ပြင်ဆင်ပါ။

အမျိုး

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}

亲自试一试

提示：请在我们的 CSS RWD 教程 中学习有关响应式 Web 设计的更多知识。

图像模态（Image Modal）

这是一个演示 CSS 和 JavaScript 如何协同工作的例子。

首先，请使用 CSS 创建模态窗口（对话框），并默认将其隐藏。

然后，当用户单击图像时，使用 JavaScript 显示模态窗口并在模态内部显示图像：

အောက်ဆီကုန်းစည်

亲自试一试