ویژگی border-radius در CSS3

10 / 10
از 1 کاربر

با استفاده از CSS3 در طراحی سایت شما می توانید با به به کاربردن ویژگی border-radius به هر عنصری مشخصه های گوشه های گرد شده را بدهید. به مثال زیر توجه کنید:

#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

ویژگی border-radius در CSS3 - مشخص شده برای هر گوشه

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

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

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

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

• یک مقدار: در هر چهار گوشه به همان مقدار اجرا می شود.

مثال برای چهار مقدار:

#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

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

ارسال نظر و نظرات ثبت شده