آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

خطوط حاشیه در CSS 3 - خاصیت border-radius

خاصیت border-radius در خطوط حاشیه :

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

Syntax border-radius : length;
مثال : border-radius : 25px ;

syntax توضیح هر یک از موارد
توضیح پارامتر
به وسیله پارامتر length می توانید میزان و درجه انحنای گوشه های خطوط حاشیه را تعیین نمایید . هر چه مقدار این پارامتر بیشتر باشد ، انحنای گوشه ها نیز بیشتر خواهد بود . این پارامتر را می توانید به دو روش مقدار دهی کنید :
  1. مقدار دهی بر حسب اندازه : در این حالت باید مقدار پارامتر را بر حسب واحدی مثال px یا em تعیین کنید . مثلا px10.
  2. مقدار دهی بر حسب درصد % : در این حالت باید مقدار انحنای گوشه ها را بر حسب درصد تعیین کنید . مثلا % 10 .
length

چند نکته مهم :
1. برای استفاده از این خاصیت باید حتما برای عنصر توسط خاصیت border خطوط حاشیه لازم را تعیین کرده تا سپس گوشه های آن را منحنی کنید . این مسئله را در مثال های عملی نشان داده ایم .
2. می توانید میزان انحنای هر گوشه خطوط حاشیه را به صورت مجزا نیز تعیین کنید . در حالت بالا میزان انحنای در نظر گرفته شده ، برای هر چهار گوشه عنصر به یک اندازه تعیین می شود . اما می توانید به یکی از روش های زیر انحنا در هر گوشه را مجزا تعریف کنید :

A : تعیین میزان انحنای هر گوشه در خاصیت چند مقداری border-radius . به ترتیب تعیین شده برای هر جهت دقت نمایید :

Syntax border-radius : border-top-left-radius   border-top-right-radius   border-bottom-right-radius   border-bottom-left-radius ;
مثال : border-radius : 25px 20px 25px 20px ;

B : یا تعیین میزان انحنای هر گوشه توسط یک خاصیت جداگانه :

Syntax border-top-left-radius : length ;
border-top-right-radius : length ;
border-bottom-right-radius : length ;
border-bottom-left-radius : length ;

مثال :
border-top-left-radius : 25px ;
border-top-right-radius : 20px ;
border-bottom-right-radius : 25px ;
border-bottom-left-radius : 20px ;


پشتیانی در مرورگر های مختلف :

این خاصیت در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه 9 به بعد ، مرورگر فایرفاکس از نسخه 4 به بعد و مرورگر های کروم و اپرا نیز از این خاصیت پشتیبانی می کنند .



مثال های عملی :

در مثال های عملی زیر سعی می کنیم تا مطالب ارائه شده را در عمل به شما نمایش دهیم .

مثال 1 : در مثال اول یک تگ < div > داریم که ابتدا توسط خاصیت border برای آن خطوط حاشیه تعریف کرده ایم . سپس با استفاده از خاصیت border-radius میزان انحنای تمام گوشه های آن را به یک اندازه یکسان 25px تعیین کرده ایم :

Example
< html >
  < head >
    < style >
      div
        {
           border : solid 2px blue ;
           border-radius : 25px ;
        }
    < /style >

  </head>
<body>
    < div >   border radius example   < /div >
</body>
</html>
کد
   border raduis example
خروجی

مثال 1 : در مثال دوم ، مثال قبل را بازنویسی کرده ایم . با این تفاوت که میزان انحنای هر یک از گوشه ها را به صورت مجزا و برحسب درصد در خاصیت چند مقداری border-radius تعیین کرده ایم . در این مثال برای گوشه های سمت راست مقدار %10 و برای گوشه های چپ %30 را در نظر گرفته ایم :

Example
< html >
  < head >
    < style >
      div
        {
           border : solid 2px blue ;
           border-radius: 30% 10% 10% 30% ;
        }
    < /style >

  </head>
<body>
    < div >   < br /> border radius example   < br /> < br /> < /div >
</body>
</html>
کد

   border raduis example

خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

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

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟