border-image-width Property
ویژگی border-image-width
در CSS عرض تصویر حاشیه (border) عنصر را تعیین می کند.
نحوه نوشتار
/* مقدار کلیدواژه */ border-image-width: auto; /* مقدار (طول) */ border-image-width: 1rem; /* مقدار (درصد) */ border-image-width: 25%; /* مقدار (عدد) */ border-image-width: 3; /* افقی | عمودی */ border-image-width: 2em 3em; /* پایین | افقی | بالا */ border-image-width: 5% 15% 10%; /* راست | پایین | راست | بالا */ border-image-width: 5% 2em 10% auto;
ویژگی border-image-width
میتواند یک تا چهار مقدار را بپذیرد.
- اگر یک مقدار مشخص شود، برای هر چهار طرف اعمال می شود.
- اگر دو مقدار مشخص شود، اولی برای حاشیه های بالا و پایین و دومی برای حاشیه های چپ و راست اعمال خواهند شد.
- اگر سه مقدار مشخص شود، اولی برای حاشیه بالا، دومی برای چپ و راست و دومی اعمال شد.
- اگر چهار مقدار مشخص شود، به ترتیب برای بالا، راست، پایین و چپ اعمال خواهد شد.
مقادیر
طول
عرض حاشیه مقدار طول را مشخص می کند. که میتواند بصورت پیکسل یا درصد باشد.
عدد
مضرب border-width
های متناظر را مشخص می کند.مقدار پیشفرض آن 1 میباشد.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
تصویر استفاده شده در این مثال به عنوان تصویر حاشیه میباشد.
html
<div> این یک متن نمونه است. </div>
css
div { border: 10px solid; border-image: url("http://my-project.ir/img/border.png") 30 space; border-image-width: 15px; padding: 20px; dorection: rtl; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.