គែម
គែមធ្វើឲ្យធាតុមានលក្ខណៈដូចខាងក្រោម និងច្រើនជាងនេះទៀត ។
ប្រភេទគែម
ដើម្បីកំណត់ប្រភេទនៃគែម គឺត្រូវប្រើ border-style property ។ តម្លៃរបស់វាមានច្រើន សូមមើលឧទាហរណ៍ខាងក្រោម ។
ប្រភេទ Border Styles ទាំងអស់
solid- បន្ទាត់ត្រង់សាមញ្ញ (ប្រើច្រើនបំផុត)dashed- បន្ទាត់ជាចន្លោះដាច់ៗdotted- បន្ទាត់ជាចំណុចdouble- បន្ទាត់២ជាន់groove- បន្ទាត់ចូលជ្រៅ (3D)ridge- បន្ទាត់លេចឡើង (3D)inset- គែមចូលជ្រៅទាំងមូលoutset- គែមលេចឡើងទាំងមូលnone- មិនមានគែមhidden- លាក់គែម
ការកំណត់គែមច្រើនតម្លៃ
យើងអាចកំណត់ border-style ច្រើនតម្លៃ ដើម្បីឲ្យគែមនីមួយៗមានស្ទាយខុសគ្នា ៖
- ១តម្លៃ ៖ លើទាំង៤ជ្រុង
- ២តម្លៃ ៖ តម្លៃទី១ = ជ្រុងលើ និងក្រោម, តម្លៃទី២ = ជ្រុងស្ដាំ និងឆ្វេង
- ៣តម្លៃ ៖ តម្លៃទី១ = ជ្រុងលើ, តម្លៃទី២ = ជ្រុងស្ដាំ និងឆ្វេង, តម្លៃទី៣ = ជ្រុងក្រោម
- ៤តម្លៃ ៖ តាមលំដាប់ លើ → ស្ដាំ → ក្រោម → ឆ្វេង (តាមទ្រនិចនាឡិកា)
property ផ្សេងៗដែលទាក់ទងនឹងការបង្កើតគែមនឹងមិនដំណើរការទេ បើមិនកំណត់ border-style property នេះ ។
កម្រាស់គែម
ដើម្បីកំណត់កម្រាស់នៃគែម គឺត្រូវប្រើ border-width property ។ តម្លៃរបស់វាគឺជាកម្រាស់ ដែលត្រូវសរសេរជាលេខ ហើយមានប្រតិកម្មទៅលើជ្រុងដូច border-style property ដែរ ។
អ្នកអាចកំណត់កម្រាស់ដោយ ៖
- ប្រវែងជាក់លាក់ (px, em, rem, etc.)
- ពាក្យពិសេស ៖
thin(ស្តើង),medium(មធ្យម),thick(ក្រាស់)
កម្រាស់គែមខុសគ្នាតាមជ្រុង
ពណ៌គែម
ដើម្បីកំណត់ពណ៌នៃគែម គឺត្រូវប្រើ border-color property ។ តម្លៃរបស់វាគឺជាពណ៌ ដែលមានប្រតិកម្មទៅលើជ្រុងដូច border-style property ដែរ ។
អ្នកអាចកំណត់ពណ៌ជា ៖ hex (#3498db), rgb(), rgba(), hsl() ឬឈ្មោះពណ៌ ។
ពណ៌គែមខុសគ្នាតាមជ្រុង
កំណត់គែមដោយប្រើ property តែមួយ
border-style, border-width និង border-color អាចសរសេរបញ្ចូលគ្នា ដោយប្រើ border property តែមួយ ។
ទម្រង់ ៖ border: [width] [style] [color];
កាលណាកំណត់ border property គឺមានប្រតិកម្មលើជ្រុងទាំង៤នៃគែម ។ លំដាប់តម្លៃមិនសំខាន់ទេ ប៉ុន្តែគេនិយមសរសេរតាម width → style → color ។
កំណត់គែមដាច់ដោយឡែកពីគ្នា
CSS អនុញ្ញាតឲ្យយើងកំណត់គែមនីមួយៗដាច់ដោយឡែកពីគ្នា ៖
គែមតាមជ្រុង
border-top- ជ្រុងលើborder-right- ជ្រុងស្ដាំborder-bottom- ជ្រុងក្រោមborder-left- ជ្រុងឆ្វេង
Properties លម្អិតសំរាប់នីមួយៗ
គែមនីមួយៗមាន properties រៀងខ្លួន ៖
border-top-style,border-top-width,border-top-colorborder-right-style,border-right-width,border-right-colorborder-bottom-style,border-bottom-width,border-bottom-colorborder-left-style,border-left-width,border-left-color
កាំគែម (Border Radius)
ដើម្បីកំណត់កាំនៃគែម ឬធ្វើឲ្យជ្រុងកោង គឺត្រូវប្រើ border-radius property ។
ការកំណត់តម្លៃ
- ១តម្លៃ ៖ លើទាំង៤ជ្រុង
- ២តម្លៃ ៖ ជ្រុងលើឆ្វេង និងក្រោមស្ដាំ / ជ្រុងលើស្ដាំ និងក្រោមឆ្វេង
- ៣តម្លៃ ៖ លើឆ្វេង / លើស្ដាំ និងក្រោមឆ្វេង / ក្រោមស្ដាំ
- ៤តម្លៃ ៖ លើឆ្វេង → លើស្ដាំ → ក្រោមស្ដាំ → ក្រោមឆ្វេង
ការបង្កើតរូបរាងពិសេស
កាំគែមដាច់ដោយឡែក
border-top-left-radius- ជ្រុងលើឆ្វេងborder-top-right-radius- ជ្រុងលើស្ដាំborder-bottom-right-radius- ជ្រុងក្រោមស្ដាំborder-bottom-left-radius- ជ្រុងក្រោមឆ្វេង
Box Shadow (ស្រមោល)
ដើម្បីបង្កើតស្រមោលឲ្យធាតុ គឺប្រើ box-shadow property ។ ស្រមោលធ្វើឲ្យធាតុមើលទៅមានជម្រៅ ។
ទម្រង់ ៖ box-shadow: [offset-x] [offset-y] [blur-radius] [spread-radius] [color];
ប្រភេទស្រមោលផ្សេងៗ
Outline (គែមខាងក្រៅ)
outline ស្រដៀងនឹង border តែមានលក្ខណៈខុសគ្នា ៖
- Outline មិនគិតបញ្ចូលក្នុងទំហំធាតុ
- Outline អាចត្រួតគ្នានឹងធាតុផ្សេង
- Outline មិនអាចកំណត់តាមជ្រុងបាន
- Outline ប្រើច្រើនសំរាប់ accessibility និង focus states
ករណីប្រើប្រាស់ជាក់ស្ដែង
1. Card Design
2. Button Styles
3. Alert Box
4. Image Frame
គន្លឹះសំរាប់ការប្រើគែម
- ប្រើ
border-radiusដើម្បីធ្វើឲ្យធាតុមើលទៅទំនើប និងស្រស់ស្អាត - ប្រើ
box-shadowដើម្បីបង្កើតជម្រៅ និងការផ្តោតអារម្មណ៍ - ប្រើ border-left ឬ border-bottom សំរាប់ accent lines
- រួមបញ្ចូល transitions ជាមួយ borders សំរាប់ hover effects
- ប្រើ rgba() សំរាប់ស្រមោលដែលមានភាពថ្លា
- ចៀសវាងការប្រើគែមក្រាស់ពេក ប្រសិនបើមិនចាំបាច់
- ប្រើ
box-sizing: border-boxដើម្បីរាប់បញ្ចូល border ក្នុងទំហំធាតុ