کوتاه نویسی حاشیه بیرونی (Outline Shorthand)
«کوتاه نویسی حاشیه بیرونی (Outline Shorthand)» یعنی با ویژگی «outline» سه چیز را یکجا بدهیم: عرض، سبک، رنگ. «Outline» بیرون «Border» است و ابعاد جعبه را تغییر نمی دهد.
تعریف ساده کوتاه نویسی outline
ویژگی «outline» مخفف سه ویژگی «outline-width»، «outline-style» و «outline-color» است. ترتیب مهم نیست؛ اما «outline-style» لازم است. مثل نوشتن تکالیف در یک خط، اما کامل.
مثال 1: outline با ترکیب های مختلف
<style>
p {
padding: 6px;
margin: 6px 0;
}
p.ex1 {
outline: dashed;
}
p.ex2 {
outline: dotted red;
}
p.ex3 {
outline: 7px solid yellow;
}
p.ex4 {
outline: thick ridge pink;
}
</style>
<p class="ex1">A dashed outline</p>
<p class="ex2">A dotted red outline</p>
<p class="ex3">A 7px solid yellow outline</p>
<p class="ex4">A thick ridge pink outline</p>
نکته: اگر «outline-style» ندهی، بقیه مقادیر اثر ندارند.
گوشه های گرد با outline
می توانی با «border-radius» گوشه ها را گرد کنی. «border-radius» شعاع گردی گوشه هاست؛ مثل گرد کردن لبه های دفتر.
مثال 2: outline همراه با border-radius
<style>
p {
padding: 6px;
margin: 6px 0;
}
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;
}
</style>
<p class="ex1">Rounded dashed outline</p>
<p class="ex2">Rounded dotted red outline</p>
<p class="ex3">Rounded solid yellow outline</p>
<p class="ex4">Rounded ridge pink outline</p>
<p class="ex5">Rounded solid green outline</p>
گام های عملی
- اول سبک را مشخص کن: «outline-style» ضروری است.
- بعد با «outline» عرض، سبک، رنگ را یکجا بده.
- در صورت نیاز «border-radius» را اضافه کن.
پیشنهاد مطالعه: رنگ حاشیه بیرونی و عرض حاشیه بیرونی برای تنظیمات دقیق تر.
جمع بندی سریع
- «outline» مخفف سه ویژگی است.
- ترتیب مقادیر مهم نیست.
- «outline-style» همیشه لازم است.
- می توانی گوشه ها را گرد کنی.