border-image-outset Property
ویژگی border-image-outset
در CSS فاصله تصویر حاشیه را از لبه بیرونی عنصر تعیین می کند.
نحوه نوشتار
border-image-outset: 3rem; border-image-outset: 1.5; border-image-outset: 2 3.3; border-image-outset: 15px 2 10px; border-image-outset: 10px 5px 13px 6px;
مقادیر
طول
مشخص می کند که border-image
در چه فاصله ای از لبه قرار گیرد. این اندازه بر حسب واحدهای اندازه در CSS مشخص می شود. (px
, rem
, em
)
اعداد
اندازه فاصله برابر است با مضربی از مقدار border-width
ویژگی border-image-outset
می تواند یک تا چهار مقدار بپذیرد. مقادیر باید مثبت باشند. مقادیر منفی سبب خواهند شد تا این ویژگی به نمایش در نیاید.
- اگر یک مقدار مشخص شود، برای هر چهار طرف مشخص می شود.
- اگر دو مقدار مشخص شود، اولی برای حاشیه های بالا و پایین و دومی برای حاشیه های چپ و راست اعمال خواهند شد.
- اگر سه مقدار مشخص شود، اولی برای حاشیه بالا، دومی برای چپ و راست و سومی برای حاشیه پایین اعمال خواهد شد.
- اگر چهار مقدار مشخص شود، به ترتیب برای حاشیه های بالا، راست، پایین و چپ اعمال خواهد شد.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<div>این یک عنصر است که ویژگی border-image-outset بر آن اعمال شده.</div>
css
div { width: 460px; background: lightgreen; border: 1rem solid; border-image: linear-gradient(tomato, dodgerblue) 30; border-image-outset: 2; margin: 60px auto; direction: rtl; font-family: "segoe ui"; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.