شما اینجا هستید

توسط ویژگی border-radius، میتوانید گوشه عناصر را گرد کنید.

ویژگی border-radius

در پایین سه مدل از گرد کردن گوشه ها را ذکر میکنیم:

  1. گرد کردن گوشه های عنصر دارای پس زمینه
  2. گرد کردن گوشه های یک عنصر دارای حاشیه
  3. گرد کردن گوشه های یک عنصر دارای تصویر پس زمینه

کد این سه مدل در زیر آمده:

<html>

<head>

<style>

#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;   

}

</style>

</head>

<body>


<p>The border-radius property allows you to add rounded corners to elements.</p>

<p>Rounded corners for an element with a specified background color:</p>

<p id="rcorners1">Rounded corners!</p>

<p>Rounded corners for an element with a border:</p>

<p id="rcorners2">Rounded corners!</p>

<p>Rounded corners for an element with a background image:</p>

<p id="rcorners3">Rounded corners!</p>


</body>

</html>

ویژگی border-radius در واقع، ویژگی تندنویسی شده برای border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius میباشد.

گرد کردن متفاوت برای هر گوشه

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

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

مثال زیر هر چهار حالت بالا را در بر میگیرد:

<html>

<head>

<style>

#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;

}

</style>

</head>

<body>


<p>Four values - border-radius: 15px 50px 30px 5px:</p>

<p id="rcorners4"></p>


<p>Three values - border-radius: 15px 50px 30px:</p>

<p id="rcorners5"></p>


<p>Two values - border-radius: 15px 50px:</p>

<p id="rcorners6"></p>


</body>

</html>

 

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.