آموزش گرد کردن گوشه ها در CSS3

4 سال پیش

امتیاز دهید post

آموزش گرد کردن گوشه ها در CSS3

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش گرد کردن گوشه ها در CSS3 خواهیم پرداخت.

CSS3 گوشه های گرد برای افزودن گوشه رنگی خاص به متن یا متن با استفاده از خاصیت حاشیه شعاع استفاده می شود. نحو ساده گوشه های گرد به شرح زیر است –

#rcorners7 {
   border-radius: 60px/15px;
   background: #FF0000;
   padding: 20px; 
   width: 200px;
   height: 150px; 
}

#rcorners7 {

border-radius: 60px/15px;

background: #FF0000;

padding: 20px;

width: 200px;

height: 150px;

}

جدول زیر مقادیر احتمالی گوشه های گرد را به شرح زیر نشان می دهد –

border-radius

برای تنظیم ویژگی شعاع از این عنصر استفاده کنید

border-top-left-radius

برای تنظیم مرز گوشه بالا سمت چپ از این عنصر استفاده کنید

border-top-right-radius

برای تنظیم مرز گوشه بالا سمت راست از این عنصر استفاده کنید

border-bottom-right-radius

برای تنظیم مرز گوشه پایین سمت راست از این عنصر استفاده کنید

border-bottom-left-radius

برای تنظیم مرز گوشه پایین سمت چپ از این عنصر استفاده کنید

مثال

این ویژگی می تواند سه مقدار داشته باشد. مثال زیر از هر دو مقدار استفاده می کند –

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #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(/css/images/logo.png);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p id = "rcorners1"&gt;Rounded corners!&lt;/p&gt;
      &lt;p id = "rcorners2"&gt;Rounded corners!&lt;/p&gt;
      &lt;p id = "rcorners3"&gt;Rounded corners!&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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(/css/images/logo.png);

background-position: left top;

background-repeat: repeat;

padding: 20px;

width: 200px;

height: 150px;

}

</style>

</head>

<body>

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

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

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

</body>

</html>

این نتیجه زیر را ایجاد می کند –

Rounded corners!

Rounded corners!

Rounded corners!

Rounded corners!

ویژگی هر گوشه

ما می توانیم ویژگی هر گوشه را مانند شکل زیر مشخص کنیم –

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
         #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px; 
         }
         #rcorners3 {
            border-radius: 15px 50px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p id = "rcorners1"&gt;&lt;/p&gt;
      &lt;p id = "rcorners2"&gt;&lt;/p&gt;
      &lt;p id = "rcorners3"&gt;&lt;/p&gt;
   &lt;/body&gt;
&lt;body&gt;

<html>

<head>

<style>

#rcorners1 {

border-radius: 15px 50px 30px 5px;

background: #a44170;

padding: 20px;

width: 100px;

height: 100px;

}

#rcorners2 {

border-radius: 15px 50px 30px;

background: #a44170;

padding: 20px;

width: 100px;

height: 100px;

}

#rcorners3 {

border-radius: 15px 50px;

background: #a44170;

padding: 20px;

width: 100px;

height: 100px;

}

</style>

</head>

<body>

</body>

<body>

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش گرد کردن گوشه ها در CSS3

آموزش گرد کردن گوشه ها در CSS3

مثال

ویژگی هر گوشه

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش گرد کردن گوشه ها در CSS3

مثال

ویژگی هر گوشه

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه