advertise laitec sharif univercity استخراج بیت کوین با کامپیوتر استخراج بیت کوین با کامپیوتر
دانلود پروژه کامل مهندسی نرم افزار ، شرکت نرم افزاری

دانلود پروژه کامل مهندسی نرم افزار ، شرکت نرم افزاری

3000 تومان
دانلود سورس n وزیر با جست وجوی ممنوع در سی شارپ #C

دانلود سورس n وزیر با جست وجوی ممنوع در سی شارپ #C

3000 تومان
دانلود برنامه رنگ آمیزی گراف با الگوریتم عقبگرد در سی شارپ

دانلود برنامه رنگ آمیزی گراف با الگوریتم عقبگرد در سی شارپ

3000 تومان
دانلود پایان نامه وب سایت مهندسی پزشکی با ASP.net

دانلود پایان نامه وب سایت مهندسی پزشکی با ASP.net

12000 تومان
دانلود سورس هوش مصنوعی رنگ آمیزی گراف با ژنتیک در #C

دانلود سورس هوش مصنوعی رنگ آمیزی گراف با ژنتیک در #C

4800 تومان

معرفی CSS3 سی اس اس 3

CSS3 سی اس اس 3 آخرین نسخه استاندارد برای CSS است و بطور کامل با نسخه های پیشین CSS سازگار است. ویژگی های جدیدی نیز به آن اضافه شده که در اینجا border-radius و border-image را معرفی خواهیم کرد.
معرفی CSS3 سی اس اس 3

معرفی CSS3 سی اس اس 3

CSS3 آخرین نسخه استاندارد برای CSS است.

CSS3 به طور کامل سازگار با نسخه های پیشین CSS است. ویژگی های جدیدی نیز به آن اضافه شده که در اینجا border-radius و border-image را معرفی خواهیم کرد.

 

ماژول های CSS3

CSS3 به ماژول هایی تقسیم شده است. این فایل شامل مشخصات CSS قدیمی (که به قطعات کوچکتر تقسیم شده است). به علاوه ماژول های جدید نیز اضافه شده اند.

برخی از مهم ترین ماژول های CSS3 عبارتند از:

► انتخابگرها

► باکس مدل

► پس زمینه و حاشیه ها

► مقادیر تصویری و محتوای جایگزین شده

► افکت های متن

► تبدیلات 2D / 3D

► انیمیشن ها

► طرح بندی چندگانه ستونی

► واسط کاربر

بسیاری از ماژولهای CSS3 ، پیشنهادات W3C هستند و بسیاری از خواص جدید CSS3 در حال حاضر در مرورگر های مدرن اجرا شده اند.

 

گوشه های گرد  CSS3

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

 

♦​ پشتیبانی مرورگر ها از خاصیت border-radius

اولین نسخه های مرورگرهایی که بطور کامل از این عنصر پشتیبانی کرده اند، بصورت زیر می باشد:

 مرورگر chrome  : نسخه 5.0

 مرورگر FireFox : ورژن  4.0

 مرورگر internet Explorer : ورژن   9.0

 مرورگر Opera : نسخه 10.5

 مرورگر safari : نسخه 5

 

​ border-radius در css3 برای مشخص کردن هر گوشه

اگر تنها یک مقدار برای ویژگی  border-radius مشخص کنید، این شعاع به تمام 4 گوشه اعمال خواهد شد. با این حال، شما می توانید در صورت تمایل هر گوشه را به طور جداگانه مشخص کنید. قوانین آن عبارتند از:

► چهار مقدار: مقدار اول به بالا سمت چپ اعمال می شود، مقدار دوم مربوط به بالا سمت راست، مقدار سوم مربوط به پایین سمت راست، و مقدار چهارم مربوط به گوشه پایین سمت چپ میباشد.

► سه مقدار: مقدار اول به بالا سمت چپ اعمال می شود، مقدار دوم مربوط به بالا سمت راست و پایین سمت چپ، مقدار سوم مربوط به پایین سمت خواهد بود.

► دو مقدار: مقدار اول مربوط به گوشه بالای سمت چپ و پایین سمت راست، و مقدار دوم مربوط به بالا سمت راست و گوشه پایین سمت چپ میباشد.

► یک مقدار : تمام چهار گوشه به همان اندازه گرد خواهند شد.

 

♦​ ویژگی های مربوط به گرد کردن گوشه ها در css3

► border-radius : یک ویژگی مختصر برای تنظیم هر چهار خاصیت border-radius مربوط به گوشه های عناصر میباشد.

► border-top-left-radius : شکل حاشیه گوشه بالای سمت چپ را تعیین میکند.

► border-top-right-radius : شکل حاشیه گوشه بالای سمت راست را تعیین میکند.

► border-bottom-right-radius : میزان گردی گوشه پایین سمت راست را معرفی میکند.

► border-bottom-left-radius : میزان گردی گوشه پایین سمت چپ را تعیین میکند.

 

 

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

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

 

♦​ پشتیبانی مرورگر ها از خاصیت border-image

اولین نسخه های مرورگرهایی که بطور کامل از این عنصر پشتیبانی کرده اند، بصورت زیر می باشد:

 مرورگر chrome  : نسخه 16.0

 مرورگر FireFox : ورژن  15.0

 مرورگر internet Explorer ورژن   11.0

 مرورگر Opera : نسخه 15

 مرورگر safari : نسخه 6

 

​ خاصیت border-image در سی اس اس3

این ویژگی به شما اجازه میدهد از یک عکس به جای حاشیه معمولی در اطراف عناصر استفاده کنید.

ویژگی border-image دارای سه بخش است:

 تصویری که بعنوان حاشیه استفاده میشود.

 تصویر از کجا قطعه قطعه میشود.

 تعیین کردن اینکه بخش وسط عکس در حاشیه تکرار شود و یا کشیده شود.

بعنوان مثال در حاشیه تصویری زیر از تصویری بنام border.png استفاده شده است، آنرا به چند تکه تقسیم میکند و گوشه های تصویر را در گوشه حاشیه قرار میدهد و بخش وسط عکس برای ایجاد حاشیه تکرار میگردد.

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

 

♦​ ویژگی های مربوط به حاشیه تصویری در CSS3

 border-image : یک ویژگی مختصر برای تنظیم تمام خواص border-image

 border-image-source : مسیر آدرس مربوط به تصویری که بعنوان حاشیه انتخاب میشود.

 border-image-slice : برش های داخلی تصویر را مشخص میکند.

  border-image-width : عرض تصویر مربوط به border

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

 border-image-repeat : مشخص میکند که آیا تصویر حاشیه باید تکرار، یا گرد و یا کشیده شود.

 

 



0
نظرات

نظر خود را ارسال کنید



نام:
ایمیل:
دیدگاه:
captcha
کد امنیتی :


advertise
معرفی CSS3 cascading style sheets 3 چگونگی استفاده از عکس در حاشیه عناصر سی اس اس3پشتیبانی مرورگرها از خواص جدید CSS3مهم ترین ماژول های CSS3گوشه های گرد CSS3ویژگی های مربوط به حاشیه تصویری در CSS3آشنایی مقدماتی با سی اس اس 3آشنایی با آخرین نسخه cssborder-radius در css3 برای مشخص کردن گردی گوشهکاربرد خاصیت border-radius در css3 چیست؟ماژول های CSS3 کدامند؟آموزش مقدماتی سی اس اس 3حاشیه تصویری در CSS3 لیست برچسب ها
تمامی حقوق این سایت اعم از محتوی ، تصاویر ، قالب و ... متعلق به گروه مهندسی وب سایت سورس کد می باشد.
SourceCodes.ir ، افقی روشن برای برنامه نویسان ، از مبتدی تا حرفه ای

کسب درآمد با کامپیوتر
تولید بیت کوین با کامپیوتر

پیشنهادات ویژه سورس کد

پکیج ویژه پروژه پایانی رشته کامپیوتر دانلود مجموعه 70 پروژه کاربردی سی شارپ وب سایت فروشگاه با php