صورت مسئله
گاهی نیاز داریم تا نگهدارنده ای مثل شکل زیر داشته باشیم که گوشه هایش از سمت بیرون تیز و از سمت داخل گرد است.
یک راه حل نه چندان جالب استفاده از دو عنصر است که می توان گوش های عنصر داخلی را با border-radius گرد کرد و عنصر بیرونی با لبه های تیز باقی بماند:
div.dad {
background: #655;
padding: .8em;
}
div.dad > div {
background: tan;
border-radius: .8em;
padding: 1em;
}
این راه حل بخوبی جواب می دهد اما مجبوریم که از دو عنصر استفاده کنیم در صورتی که برای یک متن فقط یک نگهدارنده مورد نیاز است. آیا راه حلی هست که بتوان فقط با یک عنصر این کار را انجام داد؟
راه حل
همانطور که در این مطلب گفته شده, outline گرد بودن یک عنصر را دنبال نمی کند و اما box-shadow زمانی که عنصر لبه های گرد دارد, گرد ترسیم می شود.
ما از ترکیب این دو موضوع برای رسیدن به هدفمان استفاده می کنیم. فقط کافی است که بصورت زیر عمل کنیم تا با استفاد از فقط یک عنصر به نتیجه مطلوب برسیم:
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .4em #655;
outline: .6em solid #655;
در تصویر زیر با آبی کردن رنگ سایه این موضوع به تصویر کشیده شده است که چگونه فاصله خالیی که outline با عنصر در گوشه ها بوجود می آورد را بوسیله box-shadow پر می کنیم:
حال سوال اینجا است که اندازه box-shadow را چند در نظر بگیریم؟ فرمول پایین تصویر, جواب ما خواهد بود:
توجه داشته باشید که در فرمول بالا r اندازه border-radius است.
در مثال ما حاصل فرمول بعد از گرد کردن مقدار 0.34em است. ولی نیازی نیست که هر دفعه این محاسبه را انجام دهیم کافی است همیشه اندازه box-shadow را نصف اندازه border-radius در نظر بگیریم.
دو نکته
اول اینکه در این روش اندازه outline نمی تواند کوچکتر از اندازه محسابه شده برای box-shadow باشد.
و نکته دوم اینکه در آینده ی سی اس اس این احتمال وجود دارد که گوشه های outline زمانی که عنصرمان گوشه های گرد داشته باشد, گرد شود.
در دموی زیر با تغییر مقادیر, نکات گفته شده را بررسی کنید:
See the Pen Inner rounding by Mojtaba Seyedi (@seyedi) on CodePen.
تو هم سایه رو دوست داری =)))