برای دیدهشدن خط دور، فقط یک رنگ کافی نیست. border از ضخامت، سبک و رنگ تشکیل میشه. سبک solid یعنی خط پیوسته و مقدار none یعنی خطی رسم نشه. میتونیم این سه بخش رو توی ویژگی کوتاهشده border بنویسیم یا جدا با border-width و border-style و border-color تنظیم کنیم. شکل کوتاه وقتی همه سمتها یکسانن خواناتر میشه.
مثال، خط سبز پیوسته دور یک جمله میکشه. توی فعالیت رنگ و ضخامت درستن ولی سبک none باعث میشه کادر دیده نشه. خطای رایج اینه که برای پیداکردن خط، رنگهای مختلف امتحان کنیم درحالیکه مشکل از سبک رسمه. از خودت بپرس آیا مرورگر اصلاً اجازه رسم خط رو گرفته؟ ضخامت خط در حالت content-box به اندازه بیرونی اضافه میشه، اما در این درس لازم نیست عرض رو محاسبه کنی. بهجای اضافهکردن ظرف تازه یا تصویر، همون قانون موجود رو اصلاح کن تا هر چهار لبه یک رفتار مشخص داشته باشن.
✍️ مثال حلشده:
<p class="ok">تأیید شد</p>
<style>.ok { border:1px solid green; }</style>
حالا نوبت توئه: کادر .frame باید در هر چهار طرف border با ضخامت ۳ پیکسل، سبک solid و رنگ navy داشته باشد. خط فعلی به علت سبک none پنهان است. padding برابر ۱۲ پیکسل را نگه دار؛ خط را با outline یا تصویر جایگزین نکن.
فعالیت شما
کادر .frame باید در هر چهار طرف border با ضخامت ۳ پیکسل، سبک solid و رنگ navy داشته باشد. خط فعلی به علت سبک none پنهان است. padding برابر ۱۲ پیکسل را نگه دار؛ خط را با outline یا تصویر جایگزین نکن.