از ویژگی outline-offset برای تنظیم فاصله outline با مرزهای عنصر استفاده می شود.
بصورت پیشفرض outline دور عنصر و بعد از حاشیه آن ترسیم می شود بطوری که فاصله ای بین آنها وجود ندارد اما با استفاده از ویژگی outline-offset می توان بین آنها فاصله بوجود آورد. این فاصله رنگی نخواهد داشت و شیشه ای خواهد بود.
به عنوان نمونه در مثال زیر فاصله بین outline و عنصر input در حالت focus آن به اندازه 1em خواهد بود:
input[type="text"]:focus {
outline: 2px solid purple;
outline-offset: 1em;
}
این ویژگی مقدار منفی هم می پذیرد که باعث می شود تا outline در داخل عنصر ترسیم شود. در دموی زیر مقدار این ویژگی را به اعداد مختلف تغییر دهید تا به نحوه عملکرد آن کاملا پی ببرید:
See the Pen outline-offset by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگر ها
این ویژگی در مرورگرهای کروم, فایرفاکس, سافاری و اپرا +9 کاملا پشتیبانی می شود اما در هیچ یک از نسخه های اینترنت اکسپلورر کار نمی کند.
سوال داری؟ برو به پنل پرسش و پاسخ