تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (0)

تبلیغات

گرد کردن کوشه ها در CSS3

Borderها در CSS3

Wiki

با استفاده از CSS3 می توانید گوشه ها را گرد کنید، سایه اضافه کنید و یا از تصاویر برای حاشیه ها استفاده نمایید. (بدون آنکه نیاز به برنامه جانبی دیگری مثل Photoshop داشته باشید)
در این آموزش خواص زیر را فرا خواهید گرفت:

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

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

Wiki

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

border-radius

box-shadow

border-image

IE9 خاصیت های border-radius و box-shadow را پشتیبانی می کند. 

Firefox, Chrome, Safari همه ی خاصیت های جدید Border را پشتیبانی می کنند.

توجه:نسخه های 5 به قبل Safari برای استفاده از border-image نیاز به پیشوند -webkit- دارند.

Opera خاصیت های border-radius و box-shadow را پشتیبانی می کند، اما برای استفاده از خاصیت border-image نیاز به پیشوند -o- دارد.


گرد کردن گوشه ها در CSS3

Wiki

اضافه کردن گوشه های گرد در CSS2 بسیار وقت گیر بود. (برای هر گوشه ای باید از یک تصویر استفاده می کردیم)

در CSS3، گرد کردن گوشه ها کار آسانی است.

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

این جعبه دارای گوشه های گرد است.

مثال (گرد کردن کوشه ها در CSS3)

گرد کردن گوشه های عنصر <div>

div
{
border:2px solid;
border-radius:25px;
}
خودتان امتحان کنید »

اضافه کردن سایه در CSS3

Wiki

در CSS3 از ویژگی box-shadow برای اضافه کردن سایه استفاده می شود.

مثال (گرد کردن کوشه ها در CSS3)

سایه دادن به عنصر <div>

div
{
box-shadow: 10px 10px 5px #888888;
}
خودتان امتحان کنید »

استفاده از تصویر به عنوان Border در CSS3

Wiki

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

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

تصویر اصلی که برای ساخت border بالا استفاده شده است:

Border

مثال (گرد کردن کوشه ها در CSS3)

استفاده از یک تصویر برای ساخت حاشیه های یک عنصر <div>

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
خودتان امتحان کنید »

خاصیت های جدید Border در CSS3

Wiki

خاصیت توضیحات CSS
border-image تنظیم یک عکس به عنوان حاشیه 3
border-radius گرد کردن گوشه ها 3
box-shadow اضافه کردن سایه 3

دیدگاه‌ها  

+4 # زهره ف 1395-01-17 19:41
چرا خاصیت های border-radius و box-shadow واسه من عمل نمیکنه !!!!!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1395-01-18 09:28
باید عمل کنه!
احتمالا یه جا خطا دارید یا اینکه از مرورگرتون هست.
کدها رو بذارید و اینکه ذکر کنید از چه مرورگری استفاده میکنید، تا بهتر بشه راهنمایی کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # مهدی ربانی 1394-01-27 18:57
ببخشید می خواستم بدونم دو تا عدد 30 در قسمت "استفاده از تصویر به عنوان Border در CSS3" چیکار می کنه؟ من هر چی تغییر دادم نتونستم بفهمم از کجا تا کجای عکس رو با این اعداد انتخاب می کنیم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1394-01-30 09:32
لطفاً به لینک زیر مراجعه نمایید:
www.beyamooz.com/cssref/227-css-properties/777-border-image
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # سارا 1393-12-07 12:57
ببخشید css3 چطور باید به پروژه اضافه کنیم یعنی چطوری باید برای مرورگر تعریف کنیم که از چه نسخه ای داریم استفاده میکنیم؟ اگر از همه نسخه ها استفاده کنیم چطوری باید کد بنویسیم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-12-07 16:08
بعنوان مثال زمانی که گفته می شود، IE9 به بالا خاصیت های border-radius و box-shadow را پشتیبانی می کنند، منظور این است که برای کاربرانی که نسخه ی مرورگرشان IE9 به پایین است، خصوصیت border-radius و یا box-shadow عمل نخواهد کرد و برای حل شدن این مشلک هیچ راهی وجود ندارد ...!
و اما زمانی که می گوییم، نسخه های 5 به قبل Safari برای استفاده از border-image نیاز به پیشوند -webkit- دارند یعنی اگر می خواهید از خصوصیت border-image استفاده کنید باید برای کاربرانی که از مرورگر Safari نسخه 5 به قبل استفاده می کنند، تمهیداتی را بیاندیشید یعنی باید بصورت زیر عمل کنید:
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image: url(/border.png) 30 30 round; /* Opera */
}

توجه می کنید که برای درست عمل کردم خصوصیت border-image در Safari و Opera مجبور شدیم دوبار دیگر خصوصیت border-image را با پیشوند ذکر کنیم ...! این کار ناچاراً باید انجام بشه والا خصوصیت مذکور در مرورگرهای ذکر شده عمل نخواهد کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی