គែម

ស៊ុមជុំវិញប្រអប់ (CSS Borders)

Borders អនុញ្ញាតអោយអ្នកគូសបន្ទាត់ហ៊ុំព័ទ្ធជុំវិញ Element ណាមួយក៏បាន។ អ្នកអាចកំណត់កម្រាស់ ស្ទីលបន្ទាត់ និងពណ៌របស់ស៊ុមបានតាមចិត្ត។

១. ស្ទីលនៃស៊ុម (Border Style)

Property border-style គឺជារបស់ចាំបាច់បំផុត! បើគ្មានវាទេ ស៊ុមនឹងមិនបង្ហាញឡើយ ទោះបីអ្នកកំណត់ពណ៌ និងកម្រាស់រួចហើយក៏ដោយ។ តម្លៃពេញនិយមមានដូចជា៖

• solid : បន្ទាត់ត្រង់ធម្មតា (ប្រើញឹកញាប់បំផុត)
• dashed : បន្ទាត់ដាច់ៗ (រាងធំៗ)
• dotted : បន្ទាត់ចំណុចៗ (តូចៗ)
• double : បន្ទាត់ត្រង់ពីរជាន់
• none : លុបស៊ុមចោល (ប្រើសម្រាប់លុបស៊ុមដើមរបស់ប៊ូតុង)

២. កម្រាស់ និង ពណ៌ស៊ុម (Width & Color)

បន្ទាប់ពីមាន Style ហើយ អ្នកអាចបន្ថែមកម្រាស់ និងពណ៌បាន។

• border-width : កំណត់កម្រាស់ (ឧ. 2px, 5px, 10px)
• border-color : កំណត់ពណ៌ (ឧ. red, #000000, rgba(..))

៣. ការសរសេរកាត់ (Border Shorthand)

ដើម្បីចំណេញកូដ គេមិនសរសេរ ៣ បន្ទាត់ខាងលើទេ គេសរសេរកាត់ដោយប្រើតែ border ប៉ុណ្ណោះ។

៤. ការគូសស៊ុមតែមួយចំហៀង

អ្នកអាចគូសស៊ុមតែខាងក្រោម ឬខាងឆ្វេងក៏បាន ដោយប្រើ border-bottom, border-top, border-left, border-right។ វាមានប្រយោជន៍ណាស់សម្រាប់ធ្វើជាបន្ទាត់កាត់បញ្ជាក់ពីក្រោមចំណងជើង។

៥. ធ្វើអោយស៊ុមមានរាងមូល (Border Radius)

border-radius ត្រូវបានប្រើស្ទើរតែគ្រប់ប៊ូតុង និងប្រអប់នៅលើវិបសាយទំនើបៗ ដើម្បីអោយគែមវាមើលទៅមូលស្រស់ស្អាត (មិនស្រួចដូចពីមុន)។ ពិសេសជាងនេះទៅទៀត បើអ្នកចង់បានរាងជារង្វង់មូល ១០០% គ្រាន់តែប្រើ border-radius: 50%;!