کادرها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
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 در CSS

ویژگی border در CSS به شما امکان می‌دهد استایل، عرض و رنگ کادر یک عنصر را مشخص کنید.[۱]

من در تمامی جهات کادر دارم.

من یک کادر قرمز رنگ در قسمت پایین دارم.

من کادرهای گرد شده دارم.

من یک کادر آبی رنگ در سمت چپ دارم.

استایل دهی کادر در CSS

ویژگی border-style مشخص می‌کند چه نوعی از کادر می‌بایست نمایش داده شود.

مقادیر قابل استفاده عبارتند از:

  • dotted – یک کادر نقطه ای تعریف می‌کند
  • dashed – یک کادر با خط تیره ایجاد می‌کند
  • solid – یک کادر پیوسته ایجاد می‌کند
  • double – یک کادر دو خطی ایجاد می‌کند
  • groove – یک کادر خطی (grooved) سه‌بعدی ایجاد می‌کند. حالت آن به مقدار border-color بستگی دارد
  • ridge – یک کادر لبه دار سه‌بعدی ایجاد می‌کند. حالت آن به مقدار border-color بستگی دارد
  • inset – یک کادر فرورفته سه‌بعدی ایجاد می‌کند. حالت آن به مقدار border-color بستگی دارد
  • outset – یک کادر برآمده سه‌بعدی ایجاد می‌کند. حالت آن به مقدار border-color بستگی دارد
  • none – هیچ کادر ای تعریف نمی‌کند
  • hidden– یک کادر پنهان تعریف می‌کند

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

مثال

نمایش استایل‌های متفاوت کادر:

 1 p.dotted {border-style: dotted;}
 2 p.dashed {border-style: dashed;}
 3 p.solid {border-style: solid;}
 4 p.double {border-style: double;}
 5 p.groove {border-style: groove;}
 6 p.ridge {border-style: ridge;}
 7 p.inset {border-style: inset;}
 8 p.outset {border-style: outset;}
 9 p.none {border-style: none;}
10 p.hidden {border-style: hidden;}
11 p.mix {border-style: dotted dashed solid double;}

نتیجه:

یک کادر نقطه ای

یک کادر خط چین

یک کادر solid

یک کادر double

یک کادر groove. افکت این ویژگی به مقدار ویژگی border-color بستگی دارد.

یک کادر ridge. افکت این ویژگی به مقدار ویژگی border-color بستگی دارد.

یک کادر inset. افکت این ویژگی به مقدار border-color بستگی دارد.

یک کادر outset. افکت این ویژگی به مقدار border-color بستگی دارد.

عدم وجود کادر.

یک کادر مخفی.

یک کادر ترکیبی.

نکته: هیچ‌یک از ویژگی‌های کادر CSS (که در بخش های بعدی توضیح داده خواهد شد) اثری ندارند مگر اینکه ویژگی border-style تنظیم شود.


منابع آموزشی