خبرگزاری آیصد (جدیدترین و جذاب ترین اخبار ایران و جهان)

در این مقاله سه خاصیت Border ها را بررسی می کنم که اونها عبارتند از :

• border-radius
• box-shadow
• border-image

پشتیبانی مرورگرها

border-radius = IE , Firefox ,Google Chrome , Safari , Opera

box-shadow = IE , Firefox ,Google Chrome , Safari , Opera

border-image = Firefox , Google Chrome (webkit ) , Safari ( webkit) ,

لازم به ذکر است که مرورگر IE 9 خاصیتهای border-radius و box-shadow را پشتیبانی می کند.

مرورگر Firefox کل خاصیتهای پیشرفته و جدید را پشتیبانی می کند.

مرورگر Chrome و Safari  خاصیتهای border-radius و box-shadow را پشتیبانی می کنند ولی باید پیشوند webkit برای آنها فعال گردد.

مرورگر Opera  خاصیتهای border-radius و box-shadow را پشتیبانی می کند ولی باید پیشوند -o- برا ی آنها فعال گردد.

Css3 و لبه های گرد

در سی اس اس ۳ ایجاد لبه های گرد بسیار آسان است.

برای گرد کردن لبه های یک حاشیه Border کافی است از خاصیت border-radius استفاده کنیم.

مثال :

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

در مثال بالا لبه های گرد برای یک تگ Div تعریف شده است.

خاصیت border-radius مقادیر را به صورت % درصد خمیدگی یا گردی هر کدام از ۴ لبه قبول می کند. اگر یک مقدار تخصیص داده شود این درصد خمیدگی یا زاویه برای هر ۴ گوشه اعمال می گردد . همچنین قابلیت تعریف درصد خمیدگی برای گوشه های مختلف امکان پذیر است.

Css3 و سایه

در سی اس اس ۳ برای ایجاد سایه از خاصیت box-shadow استفاده می کنیم.

مثال :

div
{
box-shadow: 10px 10px 5px #888888;
}

در مثال بالا سایه برای یک تگ Div تعریف شده است. پارامترها میزان ضخامت سایه ها و رنگ هر کدام را تعریف می کنند.

پارامترهای قابل قبول در خاصیت box-shadow  به شرح ذیل می باشند.

Css3 و حاشیه از تصاویر

در سی اس اس ۳ از خاصیت border-image برای استفاده از تصاویر به عنوان حاشیه می توان استفاده کرد.

مثال :

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

در مثال بالا از تصویر border.jpg برای حاشیه های اطراف تگ Div استفاده شده است.

همانطور که می بینید برای اینکه این حاشیه ها و تعاریف در همه انواع مرورگرها درست کار کند از پیشوند های -webkit- برای مرورگر safari و Chrome و پیشوند -o- برای مرورگر Opera استفاده شده است.

خاصیت border-image پارامترهای متفاوتی دارد که به شرح ذیل می باشند :