گوشه های گرد CSS

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

نکات اصلی گوشه های گرد CSS:

• شعاع مرزی CSS گوشه های گرد شده را به عناصر HTML اضافه می کند.
• حاشیه های گرد CSS در صورتی تفاوت دارند که رنگ پس زمینه یا حاشیه ها با رنگ های اطراف عنصر گرد متفاوت باشد.

شعاع مرزی

خاصیت border-radius می تواند تقریباً به هر عنصر HTML گوشه های گرد داشته باشد. به عنوان مثال ، افکت گرد CSS برای تصاویر و پس زمینه نیز در دسترس است.

این مثال شعاع مرز را به موارد زیر اختصاص می دهد:

• عنصری با رنگ زمینه.
• عنصری با حاشیه.
• عنصری با تصویر پس زمینه.

#roundc1 {
    border-radius: 30px;
    background: #5e37bc;
    padding: 15px; 
    width: 250px;
    height: 200px; 
}

#roundc2 {
    border-radius: 30px;
    border: 3px solid #5e37bc;
    padding: 15px; 
    width: 250px;
    height: 200px; 
}

#roundc3 {
    border-radius: 30px;
    background: url('https://cdn.bitdegree.org/learn/space.jpeg?229dfb2d');
    background-position: left top;
    background-repeat: repeat;
    padding: 15px; 
    width: 250px;
    height: 200px; 
}

توجه: حاشیه های گرد CSS با عناصر جدول که خاصیت مرز-فروپاشی تنظیم شده است برای کار نمی رود.

این جدول از خصوصیات تنظیم مرزهای گرد CSS در هر چهار لبه یا فقط در دو طرف چپ ، راست ، پایین یا بالا تشکیل شده است:

تنظیم هر گوشه

هنگام استفاده از خلاصه شعاع حاشیه ، حاشیه های گرد CSS به هر چهار لبه اعمال می شوند.

با این حال ، مرزها را می توان جداگانه با این قوانین گرد کرد:

ترتیب کاربرد – گوشه بالا چپ ، بالا راست ، پایین راست و پایین سمت چپ.

ترتیب کاربرد – بالا چپ (مقدار اول) ، بالا راست و پایین چپ (مقدار دوم) ، پایین سمت راست (ارزش سوم).

ترتیب کاربرد – بالا چپ و پایین راست (مقدار اول) ، بالا راست و پایین چپ (مقدار دوم).

یک مقدار: همه گوشه ها را به یک اندازه دور می زند:

این مثال با استفاده از ویژگی مختصر دو ، سه و چهار مقدار را تنظیم می کند:

#roundc4 {
    border-radius: 20px 60px 40px 10px;
    background: #5E37BC;
    padding: 30px; 
    width: 250px;
    height: 200px; 
}

#roundc5 {
    border-radius: 20px 60px 40px;
    background: #5E37BC;
    padding: 30px; 
    width: 250px;
    height: 200px; 
}

#roundc6 {
    border-radius: 20px 60px;
    background: #5E37BC;
    padding: 30px; 
    width: 250px;
    height: 200px; 
}

گوشه های بیضوی را می توان با استفاده از شعاع حاشیه CSS نیز ایجاد کرد. به جای گذاشتن یک نویسه فاصله بین مقادیر ، باید یک نماد برش (/) را بین دو مقدار اضافه کنید.

در مثال ، گوشه های بیضوی را به سه عنصر اختصاص می دهیم:

#roundc7 {
    border-radius: 30px/20px;
    background: #5E37BC;
    padding: 30px; 
    width: 250px;
    height: 200px; 
}

#roundc8 {
    border-radius: 20px/60px;
    background: #5E37BC;
    padding: 30px; 
    width: 250px;
    height: 200px; 
}

#roundc9 {
    border-radius: 60%;
    background: #5E37BC;
    padding: 30px; 
    width: 250px;
    height: 200px;
}

نکات مهم گوشه های گرد CSS:

• اگر در لبه های حاشیه نشتی به رنگ زمینه مشاهده کردید ، کلیپ زمینه را اضافه کنید: padding-box ؛.
• پیشوندهای -webkit- و -moz- دیگر لازم نیست. با این حال ، اگر لازم است پشتیبانی مرورگر را تضمین کنید ، می توانید آنها را به شعاع مرز اضافه کنید.
• با استفاده از اندیکاتورهای طول و درصد می توانید گوشه های گرد شده را در CSS مشخص کنید.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.