ویژگی CSS border-inline یک ویژگی اختصاری است که مقادیر مختلف ویژگی‌های مختلف مرز منطقی inline را تنظیم می‌کند و آنها را در یک عبارت تکمیلی ترکیب می‌کند.
- حالت نوشتاری، جهت‌دهی و جهت متن عنصر مشخص می‌کند که ویژگی border-inline چگونه به مرزهای واقعی نگاشت می‌شود.
- بسته به مقادیر حالت نوشتاری، جهت و جهت متن، border-inline به عنوان خصوصیت‌های border-top و border-bottom یا border-right و border-left عمل می‌کند.
- برای تعیین مرزها در بعد دیگر از خاصیت border-block استفاده کنید که هم border-block-start و هم border-block-end را تنظیم می‌کند.
مقادیر ممکن (Possible values)
border-inline با یک یا چندین مقدار از موارد زیر مشخص می‌شود، به هر ترتیب:
<border-width> – عرض مرز.
<border-style> – سبک خط مرز.
<color> – رنگ مرز.
ویژگی‌های متشکل (Constituent properties)
این ویژگی یک اختصار برای ویژگی‌های CSS زیر است:
border-inline-color
border-inline-style
border-inline-width
نحوه نوشتار (Syntax)
border-inline = <'border-block-start'> مثال ساده
این کد HTML و CSS یک مثال ساده از استفاده از ویژگی border-inline CSS را نشان می‌دهد:
<html>
<head>
<style>
.container {
background-color: #ffeeba;
width: 450px;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border-radius: 10px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
.custom-border {
border-inline: 6px dashed #3498db;
padding: 10px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<p class="custom-border">یک مثال با ویژگی border-inline</p>
</div>
</body>
</html>
توضیحات:
- در این مثال، یک دایره مخرج به نام “container” با یک پاراگراف درون آن ایجاد شده است.
- “container” دارای یک زمینه رنگی (background-color)، عرض و ارتفاع ثابت (width و height)، و موقعیت مرکزی (align-items و justify-content) است.
- پاراگراف داخلی دارای ویژگی border-inline با ضخامت 6 پیکسل و سبک مختلط است که با رنگ آبی (#3498db) مشخص شده است.
- همچنین پاراگراف دارای پدینگ 10 پیکسل، وزن متن برجسته (bold) و رنگ تیره‌تر متن (#333) است.
- از توقف نکات رنگی و سایه‌زدگی (box-shadow) نیز برای افزودن جلوه زیبایی به مخرج استفاده شده است.
این مثال یک دیزاین ساده و جذاب با استفاده از ویژگی border-inline ارائه می‌دهد که باعث می‌شود متن داخل پاراگراف به شکلی جذاب و قابل توجه نمایش داده شود.
این کد HTML و CSS یک مثال نشان می‌دهد که نحوه استفاده از ویژگی border-inline در حالت نوشتاری عمودی را نمایش می‌دهد:
<html>
<head>
<style>
.container {
background-color: #fed8b1;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 15px;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6);
writing-mode: vertical-rl;
}
.demo-border {
border:4px solid black;
border-inline: 0.9rem groove #e74c3c;
padding: 10px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">یک مثال از border-inline با متن عمودی.</p>
</div>
</body>
</html>
توضیحات:
- در این مثال، یک مخرج به نام “container” ایجاد شده است که متن عمودی دارد (با استفاده از writing-mode: vertical-rl)، عرض و ارتفاع ثابت دارد، و در مرکز صفحه قرار دارد.
- پاراگراف داخلی دارای ویژگی border-inline با ضخامت 0.9 رم (rem) و سبک groove با رنگ #e74c3c است.
- همچنین پاراگراف دارای پدینگ 10 پیکسل، وزن متن برجسته (bold) و رنگ تیره‌تر متن (#333) است.
- برای افزودن جلوه‌ای زیبا، یک حاشیه 4 پیکسلی با رنگ سیاه به پاراگراف اعمال شده است.
این مثال یک نمونه از استفاده از ویژگی border-inline در حالت نوشتاری عمودی را نشان می‌دهد که باعث می‌شود متن به شکلی جذاب و قابل توجه نمایش داده شود.
این جدول ویژگی‌های مرتبط با border-inline را به شرح زیر است:
- border-inline-width: این ویژگی عرض حدودی مرزهای متنی شناور یک عنصر را تعیین می‌کند.
- border-inline-start-width: این ویژگی عرض حدودی مرز شروع متنی شناور یک عنصر را تعیین می‌کند.
- border-inline-end-width: این ویژگی عرض حدودی مرز پایان متنی شناور یک عنصر را تعیین می‌کند.
- border-inline-end: این ویژگی به طور کلی برای تنظیم ویژگی‌های مرزهای شناور متنی پایانی فرد را تعیین می‌کند.
- border-inline-color: این ویژگی رنگ مرزهای متنی شناور یک عنصر را تعیین می‌کند.
- border-inline-start-color: این ویژگی رنگ مرز شروع متنی شناور یک عنصر را تعیین می‌کند.
- border-inline-end-color: این ویژگی رنگ مرز پایان متنی شناور یک عنصر را تعیین می‌کند.
- border-inline-start: این ویژگی به طور کلی برای تنظیم ویژگی‌های مرزهای شناور متنی شروعی فرد را تعیین می‌کند.
- border-inline-style: این ویژگی سبک مرز متنی یک عنصر را تعیین می‌کند.
- border-inline-start-style: این ویژگی سبک مرز شروع متنی یک عنصر را تعیین می‌کند.
- border-inline-end-style: این ویژگی سبک مرز پایان متنی یک عنصر را تعیین می‌کند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام