គែម

មេរៀន​នេះ មាន​ជា​វីដេអូ ។

មេរៀន​ជា​វីដេអូ

យើង​នឹង​ធ្វើ​ការ​សិក្សា​អំពី​លក្ខណៈ​របស់​គែម​ដូចជា ៖

រចនាបថ​គែម

ដើម្បី​កំណត់​រចនាបថ​នៃ​គែម គឺ​ត្រូវ​ប្រើ border-style ។

លក្ខណៈ​នៃ​តម្លៃ

យើង​ត្រូវ​កំណត់ ៤​តម្លៃ ឬ​តិច​ជាង​នេះ ដែល​វា​បង្ហាញ​អំពី​ជ្រុង​នីមួយៗ ៖

  • កំណត់​១​តម្លៃ ៖ មាន​ឥទ្ធិពល​លើ​ទាំង​៤​ជ្រុង ។
  • កំណត់​២​តម្លៃ ៖
    • តម្លៃ​ទី​១ គឺ​ជ្រុង​លើ និងក្រោម ។
    • តម្លៃ​ទី២ គឺ​ជ្រុងស្ដាំ និង​ឆ្វេង ។
  • កំណត់​៣​តម្លៃ ៖
    • តម្លៃ​ទី១ គឺ​ជ្រុង​លើ ។
    • តម្លៃ​ទី​២ គឺ​ជ្រុង​ស្ដាំ និង​ឆ្វេង ។
    • តម្លៃ​ទី​៣ គឺ​ជ្រុង​ក្រោម ។
  • កំណត់​៤​តម្លៃ ៖ តាម​លំដាប់ លើ ស្ដាំ ក្រោម ឆ្វេង ។

តម្លៃ​នីមួយៗ​របស់​វា យើង​អាច​ស្វែង​យល់​តាម​កូដ​ខាងក្រោម ៖

<div style=" border-style: solid; ">solid</div>
<div style=" border-style: dashed; ">dashed</div>
<div style=" border-style: dotted; ">dotted</div>
<div style=" border-style: double; ">double</div>
<div style=" border-style: groove; ">groove</div>
<div style=" border-style: ridge; ">ridge</div>
<div style=" border-style: inset; ">inset</div>
<div style=" border-style: outset; ">outset</div>
<div style=" border-style: dashed solid; ">double solid</div>
<div style=" border-style: dashed solid double; ">dashed solid double</div>
<div style=" border-style: dashed solid double dotted; ">dashed solid double dotted</div>
div {
    margin: 5px;
    padding: 5px;
    display: inline-block;
}

property ផ្សេងៗ​ដែល​ទាក់ទង​នឹង​ការ​បង្កើត​គែម នឹង​មិន​ដំណើរ​ការ​ទេ បើ​មិន​កំណត់ border-style នេះ ។

កម្រាស់​គែម

ដើម្បី​កំណត់​កម្រាស់​នៃ​គែម គឺ​ត្រូវ​ប្រើ border-width ។ តម្លៃ​របស់​វា គឺ​ជា​កម្រាស់ ដែល​ប្រើ​ខ្នាត​ប្រវែង​ដែល​បាន​សិក្សា​កន្លង​មក ។ ហើយ​យើង​ត្រូវ​កំណត់​វា​ទៅ​តាម​ជ្រុង​នីមួយៗ​ដូច border-style ដែរ ។

div {
    border-style: solid;
    border-width: 5px 2px 10px 7px;
}
<div>ស្វាគមន៍​មក​កាន់ KHODE</div>

ពណ៌​គែម

ដើម្បី​កំណត់​ពណ៌​នៃ​គែម គឺ​ត្រូវ​ប្រើ border-color ។ តម្លៃ​របស់​វា​គឺ​ជា​ពណ៌ ដែល​ត្រូវ​កំណត់​វា​ទៅ​តាម​ជ្រុង​នីមួយៗ​ដូច border-style ដែរ ។

#title {
    border-style: solid double;
    border-width: 5px 10px;
    border-color: purple red blue;
}
<div id="title">ស្វាគមន៍​មក​កាន់ KHODE</div>

កំណត់​គែម​ដោយ​ប្រើ property តែ​មួយ

កម្រាស់ ពណ៌ និង​រចនាបថ​របស់​គែម អាច​សរសេរ​បញ្ចូល​គ្នា ដោយ​ប្រើ property តែ​មួយ គឺ border ។

តម្លៃ​នៃ border

ត្រូវ​សរសេរ​តាម​លំដាប់ ៖

  1. កម្រាស់
  2. រចនាបថ
  3. ពណ៌ ។
#title {
    border: 5px dotted blue;
}
<div id="title">ស្វាគមន៍​មក​កាន់ KHODE</div>

កាល​ណា​កំណត់ border គឺ​មាន​ប្រតិកម្ម​លើ​ជ្រុង​ទាំង​៤​នៃ​គែម ។ យើង​អាច​កំណត់​គែម​នៃ​ជ្រុង​នីមួយៗ​ដាច់ដោយ​ឡែក​ពី​គ្នា​បាន ។

កំណត់​គែម​ដាច់​ដោយ​ឡែក​ពី​គ្នា
property ប្រើ​សំរាប់​កំណត់ ...
border-top គែម​នៃ​ជ្រុង​លើ
border-top-style រចនាបថ​គែម​នៃ​ជ្រុង​លើ
border-top-width កម្រាស់​គែម​នៃ​ជ្រុង​លើ
border-top-color ពណ៌​គែម​នៃ​ជ្រុង​លើ
border-right គែម​នៃ​ជ្រុង​ក្រោម
border-right-style រចនាបថ​គែម​នៃ​ជ្រុង​លើ
border-right-width កម្រាស់​គែម​នៃ​ជ្រុង​លើ
border-right-color ពណ៌​គែម​នៃ​ជ្រុង​លើ
border-bottom គែម​នៃ​ជ្រុង​ក្រោម
border-bottom-style រចនាបថ​គែម​នៃ​ជ្រុង​ក្រោម
border-bottom-width កម្រាស់​គែម​នៃ​ជ្រុង​ក្រោម
border-bottom-color ពណ៌​គែម​នៃ​ជ្រុង​ក្រោម
border-left គែម​នៃ​ជ្រុង​ឆ្វេង
border-left-style រចនាបថ​គែម​នៃ​ជ្រុង​ក្រោម
border-left-width កម្រាស់​គែម​នៃ​ជ្រុង​ក្រោម
border-left-color ពណ៌​គែម​នៃ​ជ្រុង​ក្រោម
#title {
    border-left : 5px dotted blue;
}
<div id="title">ស្វាគមន៍​មក​កាន់ KHODE</div>

កាំ​គែម

ដើម្បី​កំណត់​កាំ​នៃ​គែម គឺ​ត្រូវ​ប្រើ border-radius ។

តម្លៃ​លើ​ជ្រុង​នីមួយៗ
  • ១​តម្លៃ ៖ លើ​ទាំង​៤​ជ្រុង ។
  • ២​តម្លៃ ៖
    • តម្លៃ​ទី​១ គឺ​ជ្រុង​លើ​ឆ្វេង និងក្រោម​ស្ដាំ ។
    • តម្លៃ​ទី២ គឺ​ជ្រុងលើ​ស្ដាំ និង​ក្រោម​ឆ្វេង ។
  • ៣​តម្លៃ ៖
    • តម្លៃ​ទី១ គឺ​ជ្រុង​លើ​ឆ្វេង ។
    • តម្លៃ​ទី​២ គឺ​ជ្រុងលើ​ស្ដាំ និង​ក្រោម​ឆ្វេង ។
    • តម្លៃ​ទី​៣ គឺ​ជ្រុង​ក្រោម​ស្ដាំ ។
  • ៤តម្លៃ ៖ តាម​លំដាប់ លើ​ឆ្វេង លើ​ស្ដាំ ក្រោម​ស្ដាំ ក្រោម​ឆ្វេង ។
div {
    border: 2px solid orange;
    border-radius: 10px 25px;
    height: 40px;
}
<div>ស្វាគមន៍​មក​កាន់ KHODE</div>
ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត