مرز ها

پادکست CSS - 016: Borders

در ماژول مدل جعبه ، ما یک قیاس فریم برای توصیف هر بخش از مدل جعبه در نظر گرفتیم.

کادر حاشیه قاب جعبه‌های شما است و ویژگی‌های border مجموعه وسیعی از گزینه‌ها را در اختیار شما قرار می‌دهند تا آن فریم را تقریباً به هر سبکی که فکر می‌کنید ایجاد کنید.

خواص مرزی

ویژگی‌های border منفرد راهی برای استایل دادن به بخش‌های مختلف حاشیه فراهم می‌کنند.

سبک

برای اینکه یک حاشیه ظاهر شود، باید border-style تعریف کنید. چند گزینه برای انتخاب وجود دارد:

هنگام استفاده از سبک های ridge ، inset ، outset و groove ، مرورگر رنگ حاشیه را برای دومین رنگ نشان داده شده تیره می کند تا کنتراست و عمق ارائه دهد. این رفتار می تواند بین مرورگرها متفاوت باشد، به خصوص برای رنگ های تیره مانند black . در کروم، این استایل‌های حاشیه به‌نظر می‌آیند جامد هستند و در فایرفاکس، روشن می‌شوند تا رنگ دوم تیره‌تر ارائه شود.

رفتار مرورگر می تواند برای سایر سبک های حاشیه نیز متفاوت باشد، بنابراین مهم است که سایت خود را در مرورگرهای مختلف آزمایش کنید. یک مثال رایج از این تفاوت این است که هر مرورگر چگونه استایل های dotted و dashed را ارائه می دهد.

برای تنظیم سبک حاشیه در هر طرف کادر خود، می‌توانید از border-top-style ، border-right-style ، border-left-style و border-bottom-style استفاده کنید.

کوتاه نویسی

همانند margin و padding ، می‌توانید از ویژگی shorthand border برای تعریف تمام قسمت‌های حاشیه خود در یک اعلان استفاده کنید.

.my-element {
    border: 1px solid red;
}

ترتیب مقادیر در کوتاه‌نویسی border عبارتند از border-width ، border-style و سپس border-color .

رنگ

می توانید رنگ را در همه طرف جعبه خود یا در هر طرف جداگانه با border-color تنظیم کنید. به طور پیش فرض، از رنگ متن فعلی جعبه استفاده می کند: currentColor . این بدان معنی است که اگر فقط ویژگی های حاشیه مانند عرض را اعلام کنید، رنگ همان مقدار محاسبه شده خواهد بود مگر اینکه به صراحت آن را تنظیم کنید.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

برای تنظیم رنگ حاشیه در هر طرف کادر خود، از border-top-color ، border-right-color ، border-left-color و border-bottom-color استفاده کنید.

عرض

عرض یک حاشیه ضخامت خط است و با border-width کنترل می شود. عرض حاشیه پیش فرض medium ​​است. البته این قابل مشاهده نخواهد بود مگر اینکه یک سبک را تعریف کنید. می توانید از عرض های نامگذاری شده دیگر مانند thin و thick استفاده کنید.

ویژگی‌های border-width نیز یک واحد طول مانند px ، em ، rem یا % را می‌پذیرند. برای تنظیم عرض حاشیه در هر طرف کادر خود، از border-top-width ، border-right-width ، border-left-width و border-bottom-width استفاده کنید.

خواص منطقی

در ماژول Logical Properties شما نحوه ارجاع به جریان بلوک و جریان درون خطی را به جای صریح بالا، راست، پایین یا چپ کشف کردید.

شما این قابلیت را با حاشیه ها نیز دارید:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

در این مثال، .my-element دارای تمام اضلاع به عنوان دارای یک حاشیه نقطه‌دار 2px است که رنگ متن فعلی است. سپس مرز inline-end به صورت 2px ، جامد و قرمز تعریف می شود. این بدان معنی است که در زبان های چپ به راست - مانند انگلیسی - حاشیه قرمز در سمت راست کادر قرار خواهد گرفت. در زبان های راست به چپ - مانند عربی - حاشیه قرمز در سمت چپ کادر خواهد بود.

پشتیبانی مرورگر برای ویژگی های منطقی در حاشیه ها متفاوت است، بنابراین مطمئن شوید که قبل از استفاده، پشتیبانی را بررسی کنید.

شعاع مرزی

برای دادن گوشه های گرد به جعبه از ویژگی border-radius استفاده کنید.

.my-element {
    border-radius: 1em;
}

این مختصر یک حاشیه ثابت به هر گوشه جعبه شما اضافه می کند. مانند سایر ویژگی‌های حاشیه، می‌توانید شعاع مرزی را برای هر طرف با border-top-left-radius ، border-top-right-radius ، border-bottom-right-radius و border-bottom-left-radius تعریف کنید.

همچنین می‌توانید شعاع هر گوشه را در کوتاه‌نویسی مشخص کنید، که به ترتیب است: بالا سمت چپ، بالا سمت راست، پایین سمت راست و پایین سمت چپ.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

با تعریف یک مقدار واحد برای یک گوشه، از کوتاه‌نویسی دیگری استفاده می‌کنید زیرا شعاع حاشیه به دو قسمت تقسیم می‌شود: ضلع عمودی و افقی. این بدان معناست که وقتی border-top-left-radius: 1em تنظیم می کنید، شعاع بالا-چپ- بالا و شعاع بالا-چپ- چپ را تنظیم می کنید.

شما می توانید هر دو ویژگی را در هر گوشه به صورت زیر تعریف کنید:

.my-element {
    border-top-left-radius: 1em 2em;
}

این یک مقدار border-top-left-top 1em و مقدار border-top-left-left 2em اضافه می کند. این شعاع حاشیه سمت چپ بالا را به شعاع بیضوی تبدیل می کند، نه شعاع دایره ای پیش فرض.

شما می توانید این مقادیر را در کوتاه نویسی border-radius ، با استفاده از / برای تعریف مقادیر بیضی، پس از مقادیر استاندارد، تعریف کنید. این به شما امکان می دهد خلاق باشید و برخی از اشکال پیچیده را بسازید.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

تصاویر حاشیه

شما فقط مجبور نیستید از یک حاشیه مبتنی بر stroke در CSS استفاده کنید. همچنین می توانید از هر نوع تصویری با استفاده از border-image استفاده کنید. این ویژگی کوتاه نویسی به شما امکان می دهد تصویر مبدأ، نحوه برش آن تصویر، عرض تصویر، میزان فاصله از حاشیه از لبه و نحوه تکرار آن را تنظیم کنید.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

ویژگی border-image-width مانند border-width است: نحوه تنظیم عرض تصویر حاشیه خود است. ویژگی border-image-outset به شما این امکان را می دهد که فاصله بین تصویر حاشیه خود و کادری را که دور آن می پیچد تعیین کنید.

border-image-source

border-image-source (منبع تصویر حاشیه) می تواند یک url برای هر تصویر معتبری باشد که شامل گرادیان های CSS است.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

ویژگی border-image-slice یک ویژگی مفید است که به شما امکان می دهد یک تصویر را به 9 قسمت تقسیم کنید که از 4 خط تقسیم شده است. مانند خلاصه margin کار می کند که در آن مقدار افست بالا، راست، پایین و چپ را تعریف می کنید.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

با تعیین مقادیر افست، اکنون 9 بخش از تصویر دارید: 4 گوشه، 4 لبه و یک بخش میانی. گوشه ها به گوشه های عنصر با تصویر حاشیه اعمال می شوند. لبه ها به لبه های آن عنصر اعمال می شود. ویژگی border-image-repeat مشخص می کند که چگونه آن لبه ها فضای خود را پر می کنند و ویژگی border-image-width اندازه برش ها را کنترل می کند.

در نهایت، کلمه کلیدی fill تعیین می‌کند که آیا بخش میانی، باقی مانده از برش، به عنوان تصویر پس‌زمینه عنصر استفاده می‌شود یا خیر.

border-image-repeat

border-image-repeat این است که چگونه به CSS آموزش می دهید که دوست دارید تصویر حاشیه شما چگونه تکرار شود. مانند background-repeat عمل می کند.

• مقدار اولیه stretch است که تصویر منبع را برای پر کردن فضای موجود در صورت امکان گسترش می‌دهد.
• مقدار repeat لبه های تصویر مبدأ را تا آنجا که ممکن است کاشی می کند و ممکن است نواحی لبه را برای رسیدن به این هدف برش دهد.
• مقدار round همان تکرار است، اما به جای بریدن نواحی لبه تصویر تا جایی که ممکن است، تصویر را کشیده و همچنین آن را تکرار می کند تا به تکرار یکپارچه دست یابد.
• مقدار space دوباره همان تکرار است، اما این مقدار فاصله بین هر ناحیه لبه را برای ایجاد یک الگوی بدون درز اضافه می کند.

درک خود را بررسی کنید

دانش خود را از مرزها تست کنید

.my-element {
  border: solid hotpink;
}