آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش css3 Border Radius

دوره های مرتبط با این مقاله

گرد سازی گوشه ها با بهره گیری از تکنولوژی CSS 3

به وسیله ی خاصیت border-radius که در CSS 3 عرضه شد, می توان هر عنصر دلخواهی را با گوشه های گرد ترسیم کرد.

خاصیت border-radius

در CSS 3 با بهره گیری از خاصیت border-radius می توان به المان دلخواه خود خصوصیت گوشه های گرد را اعمال کرد.
توجه خود را به سه مثال زیر جلب کنید:
1. عنصری با گوشه های گرد که رنگ پس زمینه ی مشخصی دارد:

خاصیت Border-radius

2. المانی با گوشه های گرد که خط حاشیه (border) دارد:

خاصیت Border-radius

3. عنصری با گوشه های گرد که دارای یک تصویر پس زمینه است:

خاصیت Border-radius
                
                    #rcorners1 { 
                    border-radius: 25px; 
                    background: #8AC007; 
                    padding: 20px; 
                    width: 200px; 
                    height: 150px; 
    
                    #rcorners2 { 
                        border-radius: 25px; 
                        border: 2px solid #8AC007; 
                        padding: 20px; 
                        width: 200px; 
                        height: 150px; 
                     }
                    
                    #rcorners3 { 
                        border-radius: 25px; 
                        background: url(paper.gif); 
                        background-position: left top; 
                        background-repeat: repeat; 
                        padding: 20px; 
                        width: 200px; 
                        height: 150px; 
                    }
                
نکته:

خاصیت border-radius در واقع یک خاصیت مختصر نویسی کد (short-hand) است که به منظور بهینه کد نویسی و کاهش اندازه ی خاصیت های border-top-left-radius, border-top-right-radius, border-bottom-right-radius و border-bottom-left-radius تعبیه شده است.

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

چنانچه طراح وب تنها یک مقدار به خاصیت border-radius تخصیص دهد, در آن صورت همان مقدار تخصیص یافته به هر چهار گوشه ی عنصر مربوطه اعمال می شود.
با این وجود, شما می توانید برای هر گوشه مقداری متمایز درنظر بگیرید. برای این منظور باید از قوانین ذیل پیروی کنید:

  • Four values: اولین مقدار به گوشه ی بالا سمت چپ اعمال می شود. مقدار دوم به گوشه ی بالا سمت راست اعمال می گردد. سومین مقدار به گوشه ی پایین سمت راست و چهارمین مقدار به گوشه ی پایین سمت چپ اعمال می شود.
  • Three values: اولین مقدار به گوشه ی بالا سمت چپ, دومین مقدار به گوشه ی بالا سمت راست و همچنین گوشه ی پایین سمت چپ, سومین مقدار نیز به گوشه ی پایین سمت راست اعمال می گردد.
  • Two values: اولین مقدار به گوشه های بالا سمت چپ و گوشه ی پایین سمت راست اعمال می شود. دومین مقدار نیز به گوشه ی بالا سمت راست و گوشه ی پایین سمت چپ اعمال می گردد.
  • One value: هر چهار گوشه به طور یکسان گرد شده و مقداردهی می شوند

زیر سه مثال از مقداردهی های فوق را مشاهده می کنید:

                
                    Four values - border-radius: 15px 50px 30px 5px:
                    Three values - border-radius: 15px 50px 30px:
                    Two values - border-radius: 15px 50px:
                

کد CSS 3 آن در مثال زیر به نمایش گذاشته شده است:

                
                        #rcorners4 { 
                        border-radius: 15px 50px 30px 5px; 
                        background: #8AC007; 
                        padding: 20px; 
                        width: 200px; 
                        height: 150px; 
                    } 
                    #rcorners5 { 
                        border-radius: 15px 50px 30px; 
                        background: #8AC007; 
                        padding: 20px; 
                        width: 200px; 
                        height: 150px; 
                    } 
                    #rcorners6 { 
                        border-radius: 15px 50px; 
                        background: #8AC007; 
                        padding: 20px; 
                        width: 200px; 
                        height: 150px; 
                    }
                

همچنین می توان گوشه های بیضی شکل برای عنصر ایجاد کرد:

  
                          #rcorners7 { 
                            border-radius: 50px/15px; 
                            background: #8AC007; 
                            padding: 20px; 
                            width: 200px; 
                            height: 150px; 
                        } 
                        #rcorners8 { 
                            border-radius: 15px/50px; 
                            background: #8AC007; 
                            padding: 20px; 
                            width: 200px; 
                            height: 150px; 
                        } 
                        #rcorners9 { 
                            border-radius: 50%; 
                            background: #8AC007; 
                            padding: 20px; 
                            width: 200px; 
                            height: 150px; 
                        }
                

خاصیت های مربوط به گرد سازی گوشه ی عناصر در CSS:

خصوصیت
توضیحات
border-radius
خاصیت مختصر نویسی (short-hand property) ویژه ی مقداردهی هر چهار گوشه
border-top-left-radius
شکل (خط حاشیه ی) گوشه ی بالا سمت چپ را تعرف می کند
border-top-right-radius
شکل گوشه ی بالا سمت راست را تعریف می کند
border-bottom-right-radius
شکل خط حاشیه / border سمت راست گوشه ی پایین را تعریف می کند
border-bottom-left-radius
شکل گوشه ی بالا سمت چپ را مقداردهی و تعریف می کند
  • 2885
  •    1396
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .