پادکست 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
دوباره همان تکرار است، اما این مقدار فاصله بین هر ناحیه لبه را برای ایجاد یک الگوی بدون درز اضافه می کند.
درک خود را بررسی کنید
دانش خود را از مرزها تست کنید
رنگ حاشیه پیش فرض کدام است؟
historicColor
white
currentColor
black
.my-element { border: solid hotpink; }
عرض پیش فرض یک حاشیه چقدر است؟
1px
solid
medium
border-inline: 1px solid
...