کادر و سایه در CSS؛ border و border-radius | درس 30 + پروژه درس

درس 30 از دوره آموزش HTML و CSS ارومیا دیزاین

دو کارت با محتوای یکسان را تصور کنید؛ یکی بدون مرز مشخص در صفحه قرار دارد و دیگری کادر ظریف، گوشه های هماهنگ و سایه نرم دارد. تفاوت از چند ویژگی ساده CSS می آید. در این درس، کادر و سایه در CSS را طوری تنظیم می کنیم که ظاهر صفحه منظم باشد و اندازه جعبه یا خوانایی محتوا به هم نریزد.

پروژه و پاسخ تمرین: دانلود فایل پروژه درس 30 (ZIP). شامل HTML، CSS، پاسخ تمرین و راهنما؛ پس از استخراج، index.html را باز کنید. پروژه به اینترنت یا نصب کتابخانه نیاز ندارد.

در درس تصویر پس زمینه ظاهر زمینه را تنظیم کردیم. اکنون مرز و عمق بصری جعبه را کامل می کنیم. برای درک تاثیر کادر بر اندازه، مدل جعبه در CSS را مرور کنید.

border؛ سه جزء لازم برای کادر

کادر از ضخامت، سبک و رنگ تشکیل می شود. برای یک مرز ساده می توانید هر سه را در border بنویسید. ترتیب زیر خوانا است: ضخامت، نوع خط و رنگ. اگر فقط ضخامت و رنگ بدهید ولی سبک کادر none باشد، خطی دیده نمی شود؛ بنابراین نوشتن سبک را فراموش نکنید.

.card {
  border: 1px solid #c5d9e8;
}

مقدار solid خط پیوسته، dashed خط چین و dotted نقطه چین می سازد. double هم کادر دوخطی است، اما برای دیده شدن دو خط باید ضخامت کافی داشته باشد. نوع کادر را بر اساس کاربرد انتخاب کنید؛ مرز یک کارت محتوایی و محدوده یک ناحیه آزمایشی لازم نیست یکسان باشند.

.solid { border: 3px solid #0284c7; }
.dashed { border: 3px dashed #0284c7; }
.dotted { border: 3px dotted #0284c7; }

برای تغییر یک جزء از border-width، border-style یا border-color استفاده کنید. اگر همه اجزا را دوباره با border بنویسید، مقدارهای قبلی همان ویژگی کوتاه را بازنشانی می کنید. این موضوع هنگام ترکیب قوانین در چند فایل اهمیت پیدا می کند.

کادر یک سمت و تاثیر کادر بر عرض

می توانید فقط یک سمت را کادر بدهید. در متن فارسی، border-inline-start به ابتدای جهت نوشتن اشاره می کند؛ در یک بخش راست به چپ معمولاً سمت راست است. این روش برای نشانه گذاری یک یادداشت مناسب است. border-left و border-right همیشه سمت فیزیکی را مشخص می کنند و با جهت متن عوض نمی شوند.

.note {
  border-inline-start: 4px solid #0284c7;
  padding: 12px 16px;
  background-color: #e0f2fe;
}

کادر در محاسبه اندازه جعبه حضور دارد. با content-box، کادر و فاصله داخلی به عرض محتوا اضافه می شوند. با border-box، عرض مشخص شده آن ها را هم در بر می گیرد. در پروژه، همه عناصر border-box هستند تا مقایسه نمونه ها راحت باشد. اگر مفهوم واحدها را فراموش کرده اید، درس واحدهای CSS را مرور کنید.

.card {
  box-sizing: border-box;
  width: 320px;
  max-width: 100%;
  padding: 24px;
  border: 2px solid #0284c7;
}

در این مثال، عرض جعبه با احتساب فاصله داخلی و کادر، حداکثر 320px است؛ margin جدا حساب می شود. برای نمایش روی صفحه باریک، محدودیت max-width کمک می کند عرض ثابت از والد بیشتر نشود. رنگ کادر را با رنگ و پس زمینه در CSS هماهنگ انتخاب کنید.

border-radius؛ گرد کردن گوشه ها

با border-radius شکل گوشه های مرز بیرونی را تغییر می دهید. برای مقدار معمولی، یک عدد روی هر چهار گوشه اثر دارد. لازم نیست عنصر کادر قابل مشاهده داشته باشد؛ پس زمینه هم می تواند با همان شکل گرد نمایش داده شود. مقدار صفر گوشه ها را دوباره تیز می کند.

.card {
  border-radius: 16px;
}

.label {
  border-radius: 8px;
}

با چهار مقدار می توانید از گوشه بالای چپ شروع کنید و در جهت ساعت، بالای راست، پایین راست و پایین چپ را تنظیم کنید. این ترتیب فیزیکی با RTL عوض نمی شود. برای شروع، از مقدار یکنواخت استفاده کنید و فقط وقتی هدف مشخصی دارید گوشه ها را متفاوت بسازید.

.special-card {
  border-radius: 24px 8px 24px 8px;
}

border-radius به تنهایی محتوای فرزند را در مرز گرد برش نمی دهد. اگر فرزند دارای پس زمینه جدا یا تصویر باشد، گوشه خودش را تنظیم کنید. overflow: hidden می تواند برای برش محتوا کمک کند، اما ممکن است سایه فرزند یا نشانگر فوکوس را هم ببرد؛ آن را بدون نیاز به همه کارت ها اضافه نکنید.

دایره و کپسول چه تفاوتی دارند؟

برای دایره، عرض و ارتفاع مساوی و border-radius برابر 50% انتخاب کنید. اگر عرض و ارتفاع متفاوت باشند، همین درصد شکل بیضی می سازد. برای پیوند کپسولی، شعاع بزرگ مانند 999px می تواند گوشه ها را تا حد مجاز گرد کند؛ این مقدار اندازه جعبه را تغییر نمی دهد.

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: #075985;
}

.pill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
}

در پروژه، شکل دایره فقط نمونه تزئینی است. برای یک عکس واقعیِ محتوایی، همچنان از تصویر HTML و متن جایگزین مناسب استفاده کنید. نمایش inline-block پیوند را در درس display یاد گرفتیم.

box-shadow؛ ترتیب مقدارهای سایه

برای سایه ساده، دو مقدار نخست جابه جایی افقی و عمودی هستند؛ مقدار سوم میزان محوشدگی و چهارم گسترش سایه است. رنگ را هم صریح بنویسید تا نتیجه به رنگ متن وابسته نباشد. این نمونه یک سایه نرم و کم رنگ برای کارت است:

.card {
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.25);
}

عدد مثبت افقی سایه را به راست و عدد منفی به چپ می برد؛ مثبت عمودی پایین و منفی بالا است. جهت RTL این محورهای فیزیکی را برعکس نمی کند. محوشدگی نمی تواند منفی باشد، اما جابه جایی و گسترش می توانند مقدار منفی بگیرند. برای تمرین، فقط یک مقدار را در هر مرحله عوض کنید.

سایه واضح، سایه نرم و سایه داخلی

با محوشدگی صفر، لبه سایه واضح می ماند. مقدار inset سایه را داخل جعبه رسم می کند. در فایل پروژه هر سه حالت آماده اند تا تفاوت را مقایسه کنید. برای حذف سایه از none استفاده کنید. سایه زیاد لزوماً ظاهر حرفه ای تری نمی سازد؛ باید به تشخیص بخش ها کمک کند.

.sharp {
  box-shadow: 8px 8px 0 rgba(15, 23, 42, 0.3);
}

.soft {
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.25);
}

.inner {
  box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.25);
}

سایه مثل border اندازه جعبه را بیشتر نمی کند و فضایی در جریان چیدمان برای خود رزرو نمی کند. بنابراین ممکن است به محدوده عنصر بعدی برسد؛ فاصله بین بخش ها را جدا تنظیم کنید. در پروژه دو جعبه با عرض یکسان 240px وجود دارند؛ یکی سایه دارد و دیگری ندارد. اندازه border box هر دو در ابزار توسعه یکسان است.

سایه جعبه، سایه متن نیست. برای این درس box-shadow را روی کارت می گذاریم و خوانایی نوشته را با اندازه، رنگ و ارتفاع خط کنترل می کنیم. تایپوگرافی در CSS در تنظیم متن کارت کمک می کند.

تفاوت border با outline و نشانگر فوکوس

کادر بخشی از مدل جعبه است؛ outline معمولاً بیرون مرز رسم می شود و اندازه چیدمان را افزایش نمی دهد. برای کاربری که با کیبورد حرکت می کند، نشانگر فوکوس باید مشخص باشد. حذف outline بدون جایگزین مناسب، پیدا کردن پیوند فعال را سخت می کند.

.service-link:focus-visible {
  outline: 3px solid #b45309;
  outline-offset: 4px;
}

سایه را به عنوان تنها نشانه تعامل در نظر نگیرید. پیوند باید مقصد واقعی و ظاهر قابل تشخیص داشته باشد. در پروژه، زیرخط، کادر پیوند و outline فوکوس را نگه داشته ایم. با کلید Tab آن را بررسی کنید؛ رنگ و مرز در حالت عادی و فوکوس هر دو باید خوانا باشند.

تمرین درس 30: ساخت کارت معرفی خدمات

در ZIP، فایل index.html نمونه ها و کارت تمرین را دارد و style.css ظاهر پایه را تنظیم می کند. بخش .exercise را کامل کنید: کادر 1px solid #c5d9e8، شعاع 16px و سایه نرم نمونه را بدهید. پیوند داخل کارت باید فاصله داخلی 8px 16px، کادر 2px و شعاع 8px داشته باشد.

فقط کارت تمرین را هدف بگیرید تا نمونه های بالای صفحه ثابت بمانند. اگر قانون شما اعمال نشد، کلاس و قانون فعال را بررسی کنید و از آبشار و اولویت قوانین کمک بگیرید. به جای افزودن بی دلیل important، علت غلبه قانون را پیدا کنید.

پاسخ در solution.css است و از ابتدا به صفحه وصل نیست. پس از انجام تمرین، برای مقایسه این خط را بعد از لینک style.css در head قرار دهید:

<link rel="stylesheet" href="solution.css">

دانلود دوباره: فایل پروژه و پاسخ تمرین درس 30. راهنمای اجرا و آزمایش ها در README.txt قرار دارد. پروژه تماماً محلی است و به فایل خارجی نیاز ندارد.

کنترل نتیجه و رفع خطاهای رایج

• کادر دیده نمی شود: سبک کادر، رنگ و قانون فعال را بررسی کنید؛ ضخامت به تنهایی کافی نیست.
• عرض کارت بیشتر از انتظار است: box-sizing و سهم فاصله داخلی و کادر را ببینید.
• گوشه فرزند بیرون می زند: شعاع و پس زمینه خود فرزند را هم بررسی کنید؛ برش والد را فقط با نیاز مشخص اضافه کنید.
• سایه دیده نمی شود یا بریده است: شفافیت، رنگ زمینه و overflow والد را کنترل کنید.
• سایه نزدیک عنصر بعدی است: فاصله بیرونی را تنظیم کنید؛ سایه برای خودش فضا رزرو نمی کند.
• پیوند با کیبورد مشخص نیست: نشانگر فوکوس را بازگردانید و با Tab بررسی کنید.

عرض پنجره را کوچک و متن کارت را طولانی تر کنید. چون کارت ارتفاع ثابت ندارد، محتوا باید با افزایش ارتفاع جا بگیرد. سپس مقدارهای سایه را تک تک عوض کنید و نتیجه را توضیح دهید. برای کارت هایی روی تصویر، انتخاب زمینه و کنتراست متن را با درس قبل هماهنگ کنید.

خودآزمایی و ادامه دوره

کدام ویژگی اندازه جعبه را بیشتر می کند: border یا box-shadow؟ چرا یک جعبه مستطیلی با شعاع درصدی همیشه دایره نمی شود؟ آیا RTL جهت جابه جایی سایه را عوض می کند؟ اگر پاسخ را روی نمونه های پروژه نشان می دهید، هدف این درس را یاد گرفته اید.

در درس 31، حالت های تعاملی و انتخابگرهای شبه کلاس را دقیق تر تمرین می کنیم؛ از hover تا focus-visible، تا پیوندها و کنترل ها برای ماوس و کیبورد رفتار روشن داشته باشند. مرجع تکمیلی: box-shadow و border-radius در MDN.