آموزش css – گرد کردن و سایه دار کردن اجزا در css3

گرد کردن و سایه دار کردن اجزا

با استفاده از CSS3 شما میتوانید گوشه ھای اجزا ( مثل تصاویر و یا کادر ھا ) را گرد کنید و یا به جعبه ھا سایه اضافه کنید و یا حتی از تصویر برای حاشیه ھای استفاده کنید بدون آنکه نیاز به برنامه جانبی دیگری مثل فوتوشاپ داشته باشید .

در این مطلب شما با خواص زیر در سی اس اس آشنا می شوید:

border-radius
box-shadow
border-image

نکته : اینترنت اکسپلورر۹ border-image را پشتیبانی نمی کند.

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

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

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

 div {
border-radius:25px;
-moz-border-radius:25px; /* Firefox /* یا قدیمی تر ۳٫۶
}

سایه دار کردن اجزا در CSS3

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

div {
box-shadow: -10px 10px 7px #A5A5A5;
}

حاشیه تصویری در CSS3

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

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

css3