صورت مسئله
هنوز هم گاهی این سوال مطرح می شود که آیا نیاز است که همانطور که می توانیم چند پس زمینه برای یک عنصر تعیین کنیم, بتوانیم چند حاشیه (border) نیز برای یک عنصر خاص تعیین کنیم؟
شاید بتوان بوسیله border-image به نتیجه رسید اما وقتی محدود به تصاویر بشویم آن انعطاف پذیری که بوسیله CSS می توانیم داشته باشیم را دیگر نخواهیم داشت. گاهی طراحان با استفاده از قرار دادن چند عنصر بر روی هم به نتیجه دلخواه می رسند اما می دانیم استفاده از یک عنصر اضافی برای ساخت چنین طرح هایی مناسب نخواهد بود.
راه حل اول: استفاده از box-shadow
اگر اندازه box-shadow را یک عدد مثبت تعیین کنیم و همینطور مقدار مات شدن آن را برابر با صفر قرار دهیم به نتیجه زیر خواهیم رسید که کاملا شبیه به حاشیه است:
background: yellowgreen;
box-shadow: 0 0 0 10px #655;
شاید بگویید این کار را که با ویژگی border هم می توانستیم انجام بدهیم. در جواب باید گفت موضوع جالب در مورد box-shadowها این است که می توانیم برای یک عنصر هر چندتا سایه که می خواهیم تعیین کنیم:
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
نکته ای که باید در ذهن داشته باشید این است که سایه ها بر روی هم چیده می شوند به این صورت که اولین سایه بالاترین لایه هست. همچنین محاسبه اندازه سایه باید با توجه سایه های قبلی محاسبه شود. در مثال بالا می خواستیم که یک حاشیه صورتی رنگ به اندازه 5px داشته باشیم. از آنجایی که سایه قبل از آن 10px بود در نتیجه اندازه آن را (10+5) برابر با 15px در نظر گرفتیم.
به این صورت می توانید هر چند تا حاشیه که دوست دارید بسازید حتی می توانید بعد از حاشیه های مورد نظر یک سایه معمولی هم داشته باشید:
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
راه حل box-shadow به خوبی جواب می دهد اما نکات مهم زیر را حتما باید در نظر بگیرید:
box-shadowها کاملا شبیه به borderها عمل نمی کنند. زمانی که یک عنصر border دارد آن حاشیه بر عناصر مجاور تاثیر می گذارد یا به اصطلاح بر روی layout تاثیر دارد اما سایه ها این چنین نیستند و بودن آنها تاثیری بر مکان عنصر و جابجایی عناصر مجاور ندارد. اگرچه شما همیشه می توانید با اضافه کردن marginی به اندازه سایه های تعیین شده این رفتار را برای عنصر شبیه سازی کنید.
نکته دیگر اینکه وقتی از سایه ها استفاده می کنید با توجه داشته باشید که آنها قابل کلیک کردن و یا hover و غیره نیستند. اما این هم راه حل دارد همیشه می توانید با استفاده از کلمه کلیدی inset سایه ها را در داخل عنصر بوجود آورید و به اندازه قطر سایه ها به عنصر padding بدهید تا نتیجه یکسان داشته باشید. اما با این تفاوت که این بار حاشیه های شبیه سازی شده قابل کلیک و غیره هستند.
در دموی زیر با تغییر مقادیر به درک بهتر موضوع کمک کنید مثلا حاشیه های بیشتری شبیه سازی کنید. همچنین توجه کنید که حاشیه های مربع دومی با استفاده از inset ساخته شده است پس در نتیجه حاشیه ها قابل کلیک و hover هستند:
See the Pen Multiple borders by Mojtaba Seyedi (@seyedi) on CodePen.
راه حل دوم: استفاده از outline
در برخی موارد که فقط نیاز به دو حاشیه داریم می توانیم از یک border معمولی و یک outline استفاده کنیم. در روش box-shadow ما نمی توانستیم حاشیه های بعدی را بصورت خط چین (dashed) و غیره داشته باشیم اما در این روش می توانیم.
اولین مثال بالا را با روش outline می توان به این صورت بوجود آورد:
background: yellowgreen;
border: 10px solid #655;
outline: 15px solid deeppink;
خوبیه دیگری که outline دارد این است که می توان فاصله آن را از مرزهای عنصر با استفاده از ویژگی outline-offset کنترل کرد و این ویژگی مقدار منفی نیز می پذیرد. مثلا نمونه زیر را می توان اینگونه ساخت:
padding: 1em;
border-radius: .4em;
outline: 1px dashed #fff;
outline-offset: -1em;
background: #655;
اگرچه این روش محدودیت های زیر را دارد:
همانطور که گفته شد فقط می توان دو حاشیه بوجود آورد.
محدودیت دیگر اینکه اگر عنصر دارای border-radius باشد متاسفانه outline این حالت را پیدا نمی کند که البته این مورد از طرف CSS WG یک باگ شناخته شده است و در آینده حل خواهد شد.
نکته دیگر اینکه گاهی outline رفتار غیر عادی از خود نشان می دهد پس زمانی که از این روش استفاده می کنید حتما نتیجه را در مرورگرهای مختلف تست کنید.
خیلی جالبه css واقعا اینطور میگن آسونه واقعا چیز پیچیده ای هست و اینکه اگر به صورت کامل بلد باشید یک ساین فوق العاده طراحی میکنید ممنون بابت مقالات خوبتون ❤️