ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

آموزش حرفه ای ویژگیهای صفت Border در CSS مطلب ویژه

توسط 07 فروردين, 1392 5546 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

یکی از Selector یا صفت های پر کاربرد در CSS صفت  Border می باشد که برای قرار دادن خطوط به دور عناصر صفحه بکار می رود . Selector Border به طور کامل در حالت پیش فرض در بخش آموزش CSS سایت شرح داده شده است . اما در این بخش می خواهم یک سری از خاصیت های پر کاربرد سلکتور Border را که بسیار کاربردی و کار راه انداز هست را در این بخش برای شما بازدید کننده محترم توضیح داده و کمی بیشتر در مورد ویژگی های تخصصی این سلکتور پر کاربرد توضیح بدهم .برای اینکه بهتر متوجه بشوید به تصویر زیر نگاه کنید .

border-1

 

به صورت پیش فرض Selector Border به صورت زیر نوشته می شود 


border { 1px  Solid  Black ; }

 

1px ضخامت خط می باشد . Solid نوع خط کشیده شده و Black هم رنگ خط دور عناصر . شما می توانید هر کدام از خاصیت ها را به صورت جدا گانه و در یک خط تایپ کنید که این روش در زمانیکه کدهای CSS شما زیاد می باشد پیشنهاد نمی شود .


border
{
border-width: thick;
border-style: solid;
border-color: black;
}

 

تا این قسمت را در مباحث اولیه Border کاملا توضیح داده ام .
اما یک سری از نکات پیشرفته در Selector  Border  وجود دارد که در ادامه می خواهم آنها را آموزش بدهم .
فرض کنید می خواهید دور یک متن یا یک تصویر یا هر عنصری در صفحه خطی قرار بدهید که وقتی ماوس روی آن می رود رنگ خط عنصر تغییر کند .
برای انجام اینکار کافیست عنصر مورد نظر را در تگ Html با یک ID یا Class مشخص کرده سپس کلاس یا آی دی مورد نظر را در در فایل CSS فراخوانی می کنیم .
من یک متن در فایل HTML با صفت Class ایجاد کرده ام . حال می خواهم رنگ خط در حالت پیش فرض قرمز . نوع خط Solid و ضخامت آن برابر با 1 پیکسل باشد ولی وقتی ماوس روی خط یا متن قرار می گیرد رنگ کادر سبز ، نوع خط Solid و ضخامت خط برابر با 2 پیکسل تنظیم شود . به کدهای زیر توجه کنید و برای درک بهتر مشاهده دمو را یکبار ببینید .


.box {
border: 1px solid red;
}
.box:hover {
border: 2px solid green;
}

اما برای اینکه خط دور کادرهای کشیده شده کمی گرد تر باشد و انحنا داشته باشد باید چکار کنیم ؟ در ادامه راه حل این موضوع را به طور کامل برای شما توضیح میدهم .
در CSS3 خاصیتی وجود دارد به نام border-radius که می توانیم برای گرد کردن گوشه های کادر کشیده شده استفاده کنیم . یک عیبی که این ویژگی دارد ، پشتیبانی نکردن اینترنت اکسپلورر 8 و نسخه های قدیمی از این خاصیت می باشد و متاسفانه بیشتر کاربران ایرانی بدلیل پیش فرض بودن این مرورگر در ویندوزشان از اکسپلورر استفاده می کنند به همین دلیل طراحان مجبورند برای گرد کردن گوشه های کادرهای کشیده شده از تصویر استفاده کنند .
با این حال روش استفاده از این خاصیت به صورت زیر می باشد.
برای مقدار دهی نیز می توانید از PX / % / EM استفاده کنید . هرچه این مقدار بیشتر شود گردی دور کادرهای کشیده شده نیز بیشتر می شود . به تصویر زیر دقت کنید .


.box1 {
border: 1px solid red;
border-radius:10px;
}
.box1:hover {
border: 1px solid green;
}

 مشاهده دمو

border-2

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


.box2 {
border: 1px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;
}

 

border-3

به مثال زیر توجه کنید .  می خواهم با استفاده از کدهایی که تا این مرحله آموخته اید که لیمو برای شما طراحی کنم . من نام این کلاس را در Html ا lemon قرار میدهم .عرض و ارتفاع لیمو را برابر با 200 تنظیم کرده ام . رنگ آن را برابر با درصد رنگی #F5F240 قرار داده ام .


.lemon {
width: 200px; height: 200px;
background: #F5F240;
border: 1px solid #F0D900;
border-radius: 10px 150px 30px 150px;
}

 

border-4

حالا با استفاده از درس مقدماتی و این درس می توانید کادرهای بیشتر با تنظیمات مورد دلخواه خودتان ایجاد کنید . برای درک بهتر به مثال های زیر توجه نمایید .

نوع خط را به groove تغییر داده و تنظیم ضخامت خط را برابر با 20 پیکسل تنظیم میکنم .


border { 20px groove #e3e3e3; }

 

border-5

ایجاد یک خط بیرون کادر کشیده شده


.box {
border: 5px solid #292929;
outline: 5px solid #e3e3e3;
}

 

border-6

ایجاد یک منحنی


.box {
width: 200px; height: 200px;
background: #666;
border-top-left-radius: 15em 1em;
border-bottom-right-radius: 15em 1em;
}

 

border-7

 

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در چهارشنبه, 13 خرداد 1394 ساعت 21:10
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا