ویژگی Outline Offset

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

ویژگی outline-offset بین outline و حاشیه/کادر یک عنصر فاصله ایجاد می‌کند. فاصله بین یک عنصر و outline آن شفاف (به انگلیسی: transparent) است.[۱]

مثال زیر یک outline 15px ای بیرون کادر مشخص می‌کند:

مثال
1 p {
2   margin: 30px;
3   border: 1px solid black;
4   outline: 1px solid red;
5   outline-offset: 15px;
6 }


مثال زیرنشان می‌دهد که فاصلهٔ بین یک عنصر و outline آن شفاف است:

این پاراگراف یک outline به اندازه ۱۵ پیکسل خارج از لبه‌های کادر دارد.

مثال
1 p {
2   margin: 30px;
3   background: yellow;
4   border: 1px solid black;
5   outline: 1px solid red;
6   outline-offset: 15px;
7 }


خود را با تمرین‌ها امتحان کنید!

تمامی ویژگی‌های outline در CSS

ویژگی توضیحات
outline یک ویژگی مختصر برای تنظیم ویژگی‌های outline-width ,outline-style و outline-color در یک اعلان
outline-color رنگ outline را مشخص می‌کند
outline-offset فاصله بین outline و کادر یا حاشیه یک عنصر را مشخص می‌کند
outline-style استایل outline را تنظیم می‌کند
outline-width عرض outline را تنظیم می‌کند


منابع آموزشی