outline در CSS

دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 25 بهمن 1399

برای ترسیم یک طرح کلی در اطراف یک عنصر ، باید از ویژگی outline در CSS استفاده کنید:

p {
    border: 2px solid gray;
    outline: 6px dotted blue;
}

بررسی ویژگی outline در CSS:

این ویژگی در واقع خلاصه ای برای سه زیر مال است که رئوس مطالب را در CSS تعریف می کنند:

عرض رئوس مطالب
رئوس مطالب
طرح کلی

مانند تمام مختصرهای CSS ، شما باید نام زیرمجموعه ها را حذف کنید و فقط مقادیر آن ها را لیست کنید:

رئوس مطالب: رنگ سبک عرض

Definition	Default value	Subproperty
ضخامت رئوس مطالب CSS در کلمات کلیدی (واحد های باریک ، متوسط یا ضخیم) یا طول تعریف شده است	medium	outline‑width
سبک رئوس مطالب CSS که در کلمات کلیدی تعریف شده است (خودکار ، هیچ ، نقطه چین ، تکه تکه ، جامد ، دوتایی ، شیار ، خط الراس ، قرار دادن یا شروع)	none	outline‑style
رنگ رئوس مطالب CSS تعریف شده در کلمات کلیدی (currentColor یا معکوس) ، نام رنگها ، مقادیر RGB ، RGBA ، HEX ، HSL یا HSLA	`currentColor` or `invert`	outline‑color

حاشیه و طرح کلی outline در CSS

رئوس مطالب شبیه مرز است – با این حال ، تفاوت های کمی وجود دارد. برخلاف مرزها ، خطوط کلی در CSS اشغال نمی کنند. همچنین لازم نیست مستطیل شکل باشند.

یک عنصر می تواند در CSS حاشیه و رئوس مطالب داشته باشد. می توانید جابجایی بین آن ها را با استفاده از ویژگی رئوس مطالب مشخص کنید:

div {       
    border: 1px solid green;       /* Set border properties */
    outline: 1px solid hotpink;       /* Set outline properties */
    outline-offset: 15px;        /* Set the distance between the outline and border*/
}

پشتیبانی از مرورگر

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊