سلام به دوستان عزیز! امروز میخوایم در مورد یکی از ویژگی‌های جذاب CSS صحبت کنیم که به تازگی بیشتر مورد استفاده قرار گرفته: ویژگی border-inline-color. این ویژگی به شما اجازه میده رنگ حاشیه‌های خطی یک عنصر رو تنظیم کنید. برای کسانی که ممکنه هنوز با این ویژگی آشنا نباشند، باید بگم که border-inline-color برای تنظیم رنگ حاشیه‌های سمت راست و چپ به کار میره و وقتی که شما صفحتون رو به زبان‌هایی که جهت آنها از راست به چپ یا از چپ به راست استایل داده‌اید، بسیار مفیده.
تا قبل از اومدن این ویژگی، برای تغییر رنگ حاشیه‌های خطوطی نیاز بود که از border-left-color و border-right-color به صورت جداگانه استفاده کنیم که شاید کار رو یکمی پیچیده‌تر می‌کرد. اما حالا با border-inline-color میتونید به راحتی هر دو سمت رو همزمان مدیریت کنید. آیا این عالی نیست؟
فرض کنید روی یک پروژه رنگ‌بندی سایت دارید کار می‌کنید و نیاز دارید که رنگ حاشیه‌های داخلی یک بخش از صفحه خود را تغییر دهید تا با تم کلی سایتتان هماهنگ باشد. در اینجا به کمک border-inline-color می‌توانید این کار را به سادگی و به شکلی از لحاظ بصری دلنشین انجام دهید.
اجازه بدید با یک مثال ساده شروع کنیم. فرض کنید یک عنصر div داریم که می‌خواهیم برای آن یک طرح رنگی خاص تعریف کنیم. برای این منظور، به کد زیر توجه کنید:
<style>
.my-div {
border: 2px solid;
border-inline-color: red;
}
</style>
<div class="my-div">
محتوای داخلی من که یک نمونه متنی است.
</div>
در این کد، اول اومدیم یک کلاس به اسم my-div تعریف کردیم. همچنین، border رو روی 2px solid تنظیم کردیم تا اول از همه، خط‌ها مشخص بشن. در ادامه، با استفاده از border-inline-color رنگ خط حاشیه‌های سمت راست و چپ رو قرمز کردیم تا کارکرد اون رو ببینید.
به سادگی میشه دید که چطور این ویژگی زیبا و کارآمد میتونه کمکتون کنه تا پروژه‌های CSS تون یه مرحله بالاتر بره.
توضیحات کد:
.my-div:تعریف یک کلاس به اسم
my-div برای div.border: 2px solid;:مشخص کردن ضخامت و استایل حاشیه برای
div.border-inline-color: red;:تنظیم رنگ حاشیه‌های سمت راست و چپ به رنگ قرمز.
<div class="my-div">:پیاده‌سازی کلاس
my-div به المان div.