课程表

CSS 高级教程

• CSS ပညာရှင်
• CSS စကာတင်
• CSS အခြေခံ ပုံစံ
• CSS အဆင့်မြင့် ပုံစံ
• CSS ပေါ်လွှတ် ကိုယ်တူဆိုင်ရာ
• CSS id ကိုယ်တူဆိုင်ရာ
• CSS အမျိုးအစား ကိုယ်တူဆိုင်ရာ
• CSS ဖန်တီး
• CSS နှောက်ချက်
• CSS စကာတင်
• CSS စကားလုံး
• CSS စာရင်း

CSS 框模型

• CSS ပြင်ပြင်ပေါ် အစိုးရ
• CSS အတွင်း ချွန်းစိမ်
• CSS အကျယ်ချွန်
• CSS အကွာအဝေး
• CSS အကွာအဝေး ပေါင်းစပ်

CSS 定位

• CSS စေတနာ စကာတင်
• CSS ကန့်ကွက် စေတနာ
• CSS အတွက် စေတနာ
• CSS ပျံ့နှံ့

CSS 选择器

• CSS အကိုးအချုပ် ကိုယ်တူဆိုင်ရာ
• CSS ကိုယ်တူဆိုင်ရာ အုပ်စု
• CSS အမျိုးအစား ကိုယ်တူဆိုင်ရာ အသေးစိတ်
• CSS ID ကိုယ်တူဆိုင်ရာ အသေးစိတ်
• CSS အချက်အလက် ကိုယ်တူဆိုင်ရာ အသေးစိတ်
• CSS အကြီးအကျယ် ကိုယ်တူဆိုင်ရာ
• CSS အပိုင်းအစား ကိုယ်တူဆိုင်ရာ
• CSS အခြား ကိုယ်တူဆိုင်ရာ

选修课

课程推荐：

• CodeW3C.com အက္ခရာအဖွဲ့

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

CSS အကျယ်ချွန်

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

每个边框有 3 个方面：宽度、样式，以及颜色。在下面的篇幅，我们会为您详细讲解这三个方面。

边框与背景

CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。

CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

边框的样式

样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。

例如，您可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

a:link img {border-style: outset;}

定义多种样式

您可以为一个边框定义多个样式，例如：

p.aside {border-style: solid dotted dashed double;}

上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

我们又看到了这里的值采用了 top-right-bottom-left 的顺序，讨论用多个值设置不同内边距时也见过这个顺序。

定义单边样式

如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

因此这两种方法是等价的：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

အဆိုပါ:အဆိုပါ အမျိုးမျိုး အသုံးပြုပါ နိုင်သည် အခါ၌ ဘေးလက္ခဏာ အျိုး အကျုံး ကို ဘေးလက္ခဏာ အျိုး အျိုး ပြီးမှ သတ်မှတ်ပါကြောင်း၊ အခါ၌ ဘေးလက္ခဏာ အျိုး အျိုး အပါအဝင် သတ်မှတ်ပါကြောင်း ဘေးလက္ခဏာ အျိုး အျိုး အဆင်း အမှတ်အသား ကို အပ်ကွယ်လိမ့်မည်:

ဘေးလက္ခဏာ အဆင်း

သင် အဆိုပါ အကျုံး ကို: border-width အကျုံး အပြင်ဘေးလက္ခဏာ အကွက် အဆင်း သတ်မှတ်ခြင်း

ဘေးလက္ခဏာ အကွက် အဆင်း ကို သတ်မှတ်ခြင်း အမျိုးမျိုး ရှိသည်၊ အကွက် အဆင်း ကို သတ်မှတ်ပါကြောင်း၊ ဥပမာ၊ 2px သို့မဟုတ် 0.1em နှင့်အတူ သတ်မှတ်ပါ သို့မဟုတ် သုံးခြား အကြမ်းအား အကွက် အဆင်း တစ်ခု အပါအဝင် သတ်မှတ်ပါ:

注释：CSS တွင် သုံးခြား အကြမ်းအား အကွက် အဆင်း အမှတ်အသား ကို မပြင်ဆင်ခဲ့ပါ၊ ထို့ကြောင်း အသုံးပြုသူ အသုံးပြုသူ တစ်ဦး ကို thin 、medium （မူကြမ်း အဆင်း） နှင့် thick ကို အားလုံး 5px နှင့် အတူ သတ်မှတ်ပြီး လဲ့ လည်း ဖြစ်နိုင်၏၊ တစ်ဦး ကို အားလုံး 3px နှင့် 2px နှင့် သတ်မှတ်ပြီး 1px နှင့် လည်း ဖြစ်နိုင်၏:

ထို့ကြောင်း ဘေးလက္ခဏာ အကွက် အဆင်း ကို သတ်မှတ်ပါ:

p {border-style: solid; border-width: 5px;}

သို့မဟုတ်:

p {border-style: solid; border-width: thick;}

ဘေးလက္ခဏာ အကွက် သတ်မှတ်ခြင်း

သင် အဆိုပါ အကွက် ဘေးလက္ခဏာ ကို top-right-bottom-left အမှတ်အသား အရ သတ်မှတ်ပါ:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

အထက်အဘာသာ အား ပြန်လည်အသုံးပြုပါ နိုင်သည် (အဆိုပါ အုံးစပ်ခြင်း ကို သတ်မှတ်ပါ):ပေါင်းစပ်ခြင်း）：

p {border-style: solid; border-width: 15px 5px;}

သို့သော် ဘေးလက္ခဏာ နောက်ပိုင်း ကို ခုံးဆိုပါ နိုင်သည်၊ ဘေးလက္ခဏာ ကို ခုံးဆိုပါ:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

ထို့ကြောင်း အောက်ဆုံး အကျုံး အား အထက်အဆင့် အဘာသာ နှင့် အတူ ကိုးကွယ်ပါ:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

ဘေးလက္ခဏာ မပါ

အထက်အဆင့် အဘာသာတွင် သင် လေ့ရှိသည်၊ ဘေးလက္ခဏာ ကို ပြသသောအခါ ဘေးလက္ခဏာ အျိုး ကို သတ်မှတ်ပါကြောင်း၊ ဥပမာ၊ solid သို့မဟုတ် outset နှင့်အတူ:

ထို့ကြောင်း ကျူးဘာလက္ခဏာ ကို none ဟု သတ်မှတ်ပါက အမှုနှင်းပြီးလဲ့:

p {border-style: none; border-width: 50px;}

尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了，为什么呢？

这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。

记住这一点非常重要。事实上，忘记声明边框样式是一个常犯的错误。根据以下规则，所有 h1 元素都不会有任何边框，更不用说 20 像素宽了：

h1 {border-width: 20px;}

由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。

边框的颜色

设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。

可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

如果颜色值小于 4 个，值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色：

p {
  border-style: solid;
  border-color: blue red;
  }

注释：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

定义单边颜色

还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

要为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

အကြူး အနံ့အသား

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

CSS2 က နံပါတ် ဖြစ်သော နံပါတ် ကို သတ်မှတ်ခဲ့သည်။ ထို အရာ သည် အကျယ်အဝန်း ရှိသော မပြုပြင်နိုင်သော အကြူး ကို ဖန်တီးရန် အသုံးပြုသည်။ အောက်ပါ အကျိုးခံသည်ကို ကြည့်ပါ:

AAA
BBB
CCC

我们为上面的链接定义了如下样式：

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

亲自试一试

从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。

重要事项：在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。

CSS 边框属性

အက်ဒေါက်

CSS ဆိုင်ရာ စာရင်း

CSS အကျိုးဖြစ်

CSS စစ်ဆေး

CSS ပညာရှင်

တိုက်ရိုက်စားဖို့ ခုံ