ویژگی کوتاه‌نویس CSS border-block یک ویژگی منطقی است که همزمان عرض، سبک و رنگ شروع و پایان در بعد بلوک را تعیین می‌کند.
ویژگی border-block بر روی هر دو طرف شروع و پایان در بعد بلوک عمل می‌کند. حالت نوشتار، جهت نوشتار و جهت متن عنصر تعیین می‌کند که حدود دقیق فیزیکی کدام حاشیه‌ها تحت تأثیر قرار می‌گیرند.
وقتی حالت نوشتار به جهت افقی پیش‌فرض تنظیم شده باشد، ویژگی border-block بر روی حاشیه‌های بالا و پایین یک عنصر اعمال می‌شود.
به عبارت دیگر، حالت نوشتار عمودی، ویژگی border-block را بر روی حاشیه‌های راست و چپ اعمال می‌کند.
مقادیر ممکن
<border-width>: عرض حاشیه.<border-style>: سبک خط حاشیه.<border-color>: رنگ حاشیه.
ویژگی‌های تشکیل‌دهنده این ویژگی یک کوتاه‌نویس برای ویژگی‌های CSS زیر است:
- border-block-color
- border-block-style
- border-block-width
نحوه نوشتار:
border-block: <border-block-width> || <border-block-style> || <border-block-color>
مثال ساده
این مثال از ویژگی css border-block را نشان می‌دهد که عنصری با حاشیه و سبک خط مشخص شده را نمایش می‌دهد.
<html>
<head>
<style>
.border-demo {
width: 300px;
height: 150px;
margin: 20px;
padding: 20px;
background-color: #f0f0f0;
border-block: 5px dotted #3498db;
}
.add-demo {
font-size: 18px;
color: #111;
}
</style>
</head>
<body>
<div class="border-demo">
<p class="add-demo">This is a bordered element with padding and background color.</p>
<p>This is an example for border-block property</p>
</div>
</body>
</html>
در این مثال، یک عنصر div با کلاس border-demo داریم که دارای ابعاد، پرشده با پدینگ و رنگ پس‌زمینه است. با استفاده از ویژگی border-block، یک حاشیه با عرض 5 پیکسل، سبک خط خطخطی و رنگ آبی (با کد HEX #3498db) به این عنصر اعمال می‌شود.
همچنین یک پاراگراف دیگر نیز برای توضیح این مثال اضافه شده است.
ویژگی writing-mode
این مثال نشان می‌دهد که چگونه می‌توان ویژگی‌های CSS border-block را با حالت نوشتاری عمودی استفاده کرد.
<html>
<head>
<style>
.vertical-border {
writing-mode: vertical-rl;
direction: ltr;
width: 150px;
height: 250px;
margin: 50px;
padding: 20px;
background-color: #f0f0f0;
border-block: 1rem solid red;
}
.add-style {
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div class="vertical-border">
<p class="add-style">This is a vertical bordered element with a solid red border.</p>
</div>
</body>
</html>
در این مثال، یک عنصر div با کلاس vertical-border داریم که با استفاده از ویژگی writing-mode: vertical-rl; به حالت نوشتاری عمودی قرار می‌گیرد. این به معنای نوشتن متن از راست به چپ به شیوه عمودی است. همچنین با تنظیم direction: ltr;، جهت نوشتار از چپ به راست است. سپس با استفاده از ویژگی border-block، یک حاشیه با عرض 1 رم (حدوداً 16 پیکسل) و سبک خط خطی با رنگ قرمز به این عنصر اعمال می‌شود.
این جدول ویژگی‌های مرتبط با خاصیت border-block را به شرح زیر نشان می‌دهد:
| ویژگی | توضیح |
|---|---|
| border-block | یک خاصیت اختصاری برای تنظیم همه ویژگی‌های حاشیه در یک اعلان. |
| border-block-start | یک خاصیت اختصاری برای تنظیم مقادیر ویژگی‌های حاشیه منطقی شروع بلوک. |
| border-block-end | یک خاصیت اختصاری برای تنظیم مقادیر ویژگی‌های حاشیه منطقی پایان بلوک. |
| border-block-color | تعیین رنگ حاشیه‌های منطقی بلوک یک عنصر. |
| border-block-start-color | تعیین رنگ حاشیه منطقی شروع بلوک یک عنصر. |
| border-block-end-color | تعیین رنگ حاشیه منطقی پایان بلوک یک عنصر. |
| border-block-style | تعیین سبک حاشیه‌های منطقی بلوک یک عنصر. |
| border-block-start-style | تعیین سبک حاشیه منطقی شروع بلوک یک عنصر. |
| border-block-end-style | تعیین سبک حاشیه منطقی پایان بلوک یک عنصر. |
| border-block-width | تعیین عرض حاشیه‌های منطقی بلوک یک عنصر. |
| border-block-start-width | تعیین عرض حاشیه منطقی شروع بلوک یک عنصر. |
| border-block-end-width | تعیین عرض حاشیه منطقی پایان بلوک یک عنصر. |
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام