کوتاه نویسی خط پیرامونی (Outline Shorthand) در CSS
ویژگی «کوتاه نویسی خط پیرامونی (Outline Shorthand)» با خاصیت outline امکان تعیین هم زمان اجزای خط پیرامونی را می دهد. بنابراین، کد کوتاه تر می شود و همچنان خوانایی حفظ می گردد.
ویژگی outline به صورت کوتاه نویسی
خاصیت outline میان بُرِ سه ویژگی زیر است؛ ترتیب مقادیر اهمیتی ندارد و می توانید یک، دو یا سه مقدار بنویسید.
outline-widthoutline-style(الزامی)outline-color
نکته: برای آشنایی با اجزای مرتبط، به صفحات Outline Color و Outline سر بزنید.
نمونه های کوتاه نویسی خط پیرامونی
در مثال های زیر، از میان بُر outline برای تعیین سبک، رنگ و ضخامت استفاده شده است.
p.ex1 { outline: dashed; } p.ex2 { outline: dotted red; } p.ex3 { outline: 7px solid yellow; } p.ex4 { outline: thick ridge pink; }کوتاه نویسی همراه با گوشه های گرد
می توانید در کنار کوتاه نویسی خط پیرامونی، با border-radius گوشه ها را گرد کنید.
p.ex1 { outline: dashed; border-radius: 8px; } p.ex2 { outline: dotted red; border-radius: 5px; } p.ex3 { outline: 7px solid yellow; border-radius: 5px; } p.ex4 { outline: thick ridge pink; border-radius: 8px; } p.ex5 { outline: thick solid green; border-radius: 10px; }برای ادامه ی مباحث، صفحه Outline Offset را دنبال کنید. همچنین از عبارت کوتاه نویسی خط پیرامونی به عنوان راهنمای سریع استفاده کنید.