عرض

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها


ویژگی border-width عرض چهار خط دور کادر را مشخص می‌کند.[۱]

عرض را می‌توان به عنوان یک اندازه خاص (به واحد px ,pt ,cm ,em و …) تنظیم کرد یا می‌توان یکی از سه مقدار از پیش تعریف شده: thin (به فارسی: نازک)، medium (به فارسی: متوسط) یا thick (به فارسی: ضخیم) را به کار برد:

مثال

نمایش عرض‌های مختلف کادر:

 1 p.one {
 2   border-style: solid;
 3   border-width: 5px;
 4 }
 5 
 6 p.two {
 7   border-style: solid;
 8   border-width: medium;
 9 }
10 
11 p.three {
12   border-style: dotted;
13   border-width: 2px;
14 }
15 
16 p.four {
17   border-style: dotted;
18   border-width: thick;
19 }


عرض های مخصوص جوانب

ویژگی border-width می‌تواند یک تا چهار مقدار داشته باشد (برای کادر بالا، کادر سمت راست، کادر پایین، و کادر سمت چپ).

مثال
 1 p.one {
 2   border-style: solid;
 3   border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
 4 }
 5 
 6 p.two {
 7   border-style: solid;
 8   border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
 9 }
10 
11 p.three {
12   border-style: solid;
13   border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left
14 }



منابع آموزشی