انتخاب رنگ سبز انتخاب رنگ آبی انتخاب رنگ قرمز

Border یا حاشیه در CSS

CSS3 Border



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

در این درس شما خواص زیر را در سی اس اس یاد میگیرید :

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

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

اینترنت اکسپلورر 9 دو مورد از سه مورد خواص جدید را پشتیبانی می کند .
فایرفاکس برای border-image نیاز به پیشوند -moz دارد.
کروم و سافاری برای استفاده از border-image نیاز به پیشوند -webkit- دارند .
اوپرا برای border-image نیاز به پیشوند -o- دارد.
اوپرا خوشبختانه ویژگی های جدید سی اس اس که در بالا ذکر شد ( border-radius , border-image و box-shadow ) را پشتیبانی میکند .

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



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

این جعبه دارای گوشه های گرد است.
نمونه (گرد کردن المنت Div)
Internet ExplorerFirefoxChromeSafariOpera
div {
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 یا قدیمی تر */
}
سایه برای اجزا در CSS3

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


نمونه (اضافه کردن سایه به المنت Div)
Internet ExplorerFirefoxChromeSafariOpera
div {
box-shadow: -10px 10px 7px #A5A5A5;
}

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



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



با استفاده از این تصویر ایجاد شده است :



نمونه (استفاده از یک تصویر برای ایجاد حاشیه تصویری پیرامون Div)
Internet ExplorerFirefoxChromeSafariOpera
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 */
}
شرح دادن ویژگی های فوق

برای دیدن صفحه مخصوص هر یک از ویژگی های فوق روی نام آن ها کلیک کنید :

وی بی ایران در Facebook

صفحه رسمی وی بی ایران در فیس بوک قصد دارد تا بهترین مطالب را به Stream شما ارسال کند . اگر میخواهید :
  • استایل های جدید
  • هک های جدید
  • مقاله های محبوب
  • خبر های جدید ویبولتین
  • و ..
برای شما ارسال شود ، هم اکنون پیج ما را لایک کنید .
برای ورود به صفحه رسمی وی بی ایران روی آیکن فیس بوک کلیک کنید .