حاشیه با گوشه های گرد

وردپرسی | طراحی سایت با وردپرس

وردپرسی فیدخوان سایت های مرتبط با سیستم مدیریت محتوای وردپرس می باشد. مطالبی شامل قالب های وردپرس، افزونه های وردپرس، هک های وردپرس و اخبار دنیای وردپرس. تمام مطالب برای رعایت حقوق نویسندگان دارای لینک منبع می باشد. سایت های مرتبط با وردپرس نیز که تمایل به ثبت فید خود در سایت وردپرسی دارند نیز می توانند از بخش ثبت سایت به ما اطلاع رسانی کنند. توجه داشته باشید که لازمه این کار داشتن فید مخصوص مطالب وردپرس می باشد.

حاشیه با گوشه های گرد

  • 119 بازدید
  • ۰۲ بهمن, ۱۳۹۲

با ویژگی border می توان حاشیه برای محتویات تگ ها ایجاد کرد

css borders

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

حاشیه با گوشه های گرد توسط مرورگرهای زیر پشتیبانی می شود :

IE9, Opera 8+, Firefox و Chrome & Safari.

  •  برای اینکه در مرورگر ie , opera گوشه های گرد نشان داده شوند از ویژگی زیر استفاده کنید :

border-radius

  •   برای اینکه در مرورگر firefox گوشه های گرد نشان داده شوند از ویژگی زیر استفاده کنید :
    -moz-border-radius

       برای اینکه در مرورگر safari , chrome گوشه های گرد نشان داده شوند از ویژگی زیر استفاده کنید :

-webkit-border-radius

نکته بسیار مهم :

برای اینکه بتوانید ، حاشیه را ببینید باید مقادیر زیر را مشخص نمائید :

border-color

border-width

border-style

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

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

سومین عدد بعد از دستور گرد کردن ، میزان گردی در گوشه پائین سمت راست است

چهارمین  عدد بعد از دستور گرد کردن ، میزان گردی در گوشه پائین سمت چپ است

 مثال – روش ایجاد شکل زیر

line1
line2
line3

pre{
width:5cm;
height:3cm;
text-aign:center;
border-style:solid;
border-color:green;
border-width:3px;
 border-radius:100px 100px 0 0 ;
-moz-border-radius:100px 100px 0 0 ;
-webkit-border-radius:100px 100px 0 0 ;
}

 

مثال – روش ایجاد شکل زیر :

line1
line2
line3

pre

{
width:5cm;
height:3cm;
text-align:center;
 border-width: 4px 30px 4px 30px;
border-style: groove ridge dashed groove;
border-color: #cc0000;
border-radius:100px 100px 0 0 ;
-moz-border-radius:100px 100px 0 0 ;
-webkit-border-radius:100px 100px 0 0 ;
}

 

مثال – روش ایجاد شکل زیر :

line1
line2
line3

 

pre

{
width:5cm;
height:3cm;
text-align:center;
border-color:red;
border-width:3px;
border-style:solid;
 border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

 

مثال –  روش ایجاد شکل زیر :

line1
line2
line3
{
text-algin:center;
width:5cm;
height:3cm;
border-color:green;
 border-width: 0px 12px 0px 12px;
border-style: double; border-color: violet;
border-radius:40px 40px 60px 60px;
-moz-border-radius:40px 40px 60px 60px;
-webkit-border-radius:40px 40px 60px 60px;
}

 

مثال -روش ایجاد شکل زیر :

line1
line2
line3
{
text-align:center;
width:5cm;
height:3cm;
border-style:solid;
border-color:green;
border-width:3px;
 border-radius: 20px 100px 100px 20px;
-moz-border-radius: 20px 100px 100px 20px;
-webkit-border-radius: 20px 100px 100px 20px;
}

 

مثال – روش ایجاد شکل زیر :

line1
line2
line3
{
text-align:center;
width:5cm;
height:3cm;
 border-width: 12px;
border-style: groove;
border-color: red blue green black;
border-radius:20px 20px 20px 20px;
-moz-border-radius:20px 20px 20px 20px;
-webkit-border-radius:20px 20px 20px 20px;
}

 

مثال – روش ایجاد شکل زیر :

line1
line2
line3
{
text-align:center;
width:5cm;
height:3cm;
 border-width: 5px;
border-style: solid;
border-color: red;
 border-radius: 0 120px 0 120px;
-moz-border-radius: 0 120px 0 120px;
-webkit-border-radius: 0 120px 0 120px;
}

 

مثال – روش ایجاد شکل زیر :

line1
line2
line3
pre
{
text-align:center;
width:5cm;
height:3cm;
 background:orange;
border-width:4px 30px 4px 30px;
border-style: solid;
border-color: #56c6d9 #56c6d9 #fe2192 #fe2192;
border-radius:0 120px 0 120px;
-moz-border-radius:0 120px 0 120px;
-webkit-border-radius:0 120px 0 120px;
}

ادامه مطلب: آموزش طراحی سایت




ارسال نظر