آموزش CSS – ویژگی border در CSS3

در جلسه قبل از آموزش CSS با اعتبارسنجی CSS آشنا شدید. در این بخش قصد داریم به ویژگی border در CSS3 یپردازیم.

با ویژگی border در CSS3 می توانید تصاویر را به عنوان حاشیه دور المان قرار بدید.

استفاده از border در CSS3

CSS3 دو ویژگی جدید برای استایل دهی بیشتر border المان ها ارایه داده است.

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

بخش زیر ویژگی border در CSS3 را توضیح می دهد, برای دیگر ویژگی های مربوط به border آموزش border در css را مطالعه بفرمایید

ساخت گوشه های گرد با CSS3

خصوصیت border-radius می تواند برای ساخت گوشه های گرد استفاده شود.

این ویژگی شکل گوشه لبه حاشیه خارجی (border) را تعریف می کند. قبل از CSS3 , تصاویر بریده شده برای ساخته این گوشه ها استفاده می شد.

.box {
    width: 300px;
    height: 150px;
    background: #ffb6c1;
    border: 2px solid #f08080;
    border-radius: 20px;
}

.box {

width: 300px;

height: 150px;

background: #ffb6c1;

border: 2px solid #f08080;

border-radius: 20px;

}

اضافه کردن تصویر به border در CSS3

خاصیت border-image به شما اجازه مشخص کردن یک تصویر برای حاشیه خارجی المان را می دهد.

این خاصیت یک خاصیت چند مقداری بوده و حالت کوتاه و خلاصه شده چندین خاصیت border-image-source, border-image-width, border-image-outset و border-image-repeat است .

برای تعیین خواص فوق دو راه وجود دارد :

تعیین مقدار کلیه خواص در خاصیت چند مقداری border-image .
تعیین هر کدام از خواص به صورت جداگانه .

راه اول راهی بهتر و متداول است . زیرا حجم کدنویسی را کاهش داده و نظم بهتری به کد نویسی می دهد .

در روش اول در واقع باید مقدار هر کدام از خاصیت های border را به ترتیب قرار داد .

در جداول زیر به توضیح هر یک موارد بالا می پردازیم:

توضیح	معادل کوتاه نشده	خاصیت کوتاه syntax شده در
این خاصیت آدرس عکسی که قرار است به عنوان خط حاشیه مورد استفاده قرار بگیرد را تعیین می کند . اگر مقدار آن برابر با none قرار داده شود ، هیچ عکسی به عنوان خطوط حاشیه به کار برده نمی شود .	`border-image-source`	`source`
این خاصیت عرض خطوط نمایش را تعیین می کند . مقدار پیش فرض خاصیت width برایر صفر است و می تواند به یکی از ۳ حالت زیر مقدار دهی شود : مقدار عددی بر حسب `pixel` یا pt مثلا px 10 . مقدار بر حسب درصد مثلا % ۱۰ . قردادن مقدار برابر با `auto` . که باعث می شود مقدار خود را از عنصر مادر به ارث ببرد .	`border-image-width`	`width`
این خاصیت میزان فاصله محتویات درون عنصر با خطوط حاشیه را تعیین می کند .	`border-image-outset`	`outset`
این خاصیت تعیین می کند که اگر عکس مورد نظر برای خطوط حاشیه کوچکتر از مقدار لازم بود ، آیا برای پوشش کل ناحیه خطوط حاشیه ، تکرار ( `repeat` ) یا بزرگنمایی ( `stretch` ) شود . این خاصیت می تواند با یکی از ۳ حالت زیر مقدار دهی شود : `stretch` : این مقدار باعث می شود تا عکس برای پوشاندن کل ناحیه خطوط نمایش ، بزرگنمایی و کشیده تر از حالت معمولی شود . `repeat` : این مقدار باعث می شود تا عکس برای پوشاندن کلیه ناحیه خطوط نمایش ، به دفعات لازم تکرار شود . `round` : این مقدار باعث می شود تا عکس برای پوشاندن کل ناحیه خطوط نمایش ، به صورت کاشی وار ( tile ) در تمام ناحیه قرار بگیرد . به عبارت دیگر با تکرار در ۲ جهت عمودی و افقی کل فضا را پوشش خواهد داد .	`border-image-repeat`	`repeat`

.box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    -webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */
    border-image: url("border.png") 30 30 round;
}