خدمات طراحی سایت
طراحی و اجرای شبکه های کامپیوتری در کرمانشاه و شهرستانهای تابعه
انجام پروژه های دانشجویی
آموزش های طراحی وب
آموزشهای شبکه

وِیژگی CSS Border

ویژگی CSS Border به شما اجازه می دهد که Style و رنگ و عرض حاشیه عناصر را تعیین نمایید .

Border Style

سبک حاشیه در css

ویژگی border-style نوع نمایش حاشیه را تعیین می نماید .

نکته : چنانچه ویژگی border-style را مقدار دهی ننمایید هیچ افکتی بر روی حاشیه عنصر شما اجرا نخواهد شد .

مقادیر border-style :

None : هیچ حاشیه ای برای عنصر در نظر نمی گیرد .عنصر بدون حاشیه است

dotted : تعریف یک حاشیه نقطه نقطه

Dashed : در اين حالت خطوط حاشيه به صورت بريده بريده نمايش داده می شوند .

solid : تعریف یک حاشیه توپر

double : تعریف نمودن دوحاشیه ،حاشیه دوتایی برای یک عنصر ، عرض حاشیه را می توان با ویژگی border-width تعیین نمود .

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

ridge : در این حالت خطوط حاشیه به صورت سه بعدی با طیف رنگی نمایش داده می شوند . این افکت به مقدار ویژگی border-color بستگی دارد .

Inset : در اين حالت خطوط حاشيه به صورت 3D نمايش داده می شوند که معمولا خطوط بالايي و سمت چپ دارای سايه و تيره تر از خطوط ديگر هستند . این افکت به مقدار ویژگی border-color بستگی دارد .

Outset : در اين حالت خطوط حاشيه به صورت 3D نمايش داده می شوند که معمولا خطوط پايينی و سمت راست دارای سايه و تيره تر از خطوط ديگر هستند . این افکت به مقدار ویژگی border-color بستگی دارد .

مثال برای border-style

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border-style</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
No border.
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
A hidden border.
</body>
</html>

css چیست
قواعد نوشتاری زبان css
کلاس و id در css
چگونگی عملکرد css
تنظیم پس زمینه background در css
متن در css
فونت در css
لینک ها در css
لیستها در css
جداول در css
باکس Box Model در css
ویژگی css border
ویژگی css outline
ویژگی css margin
ویژگی css padding
گزینشگرهای گروهی در Css
خاصیت css dimension
خاصیت css display
خاصیت css position
خاصیت css floating
خاصیت css align
شبه کلاسها در css
شبه عناصر در css
نوار هدایت در css
گالری تصاویر در css
ایجاد تصاویر شفاف در css
خاصیت image sprites در css
انواع رسانه ها در css
انتخاب گرها در css
معرفی css3
حاشیه در css3
پس زمینه در css3
خاصیت css3 gradients
جلوه های متن در Css3
فونت در css3
تغییر شکل های 2 بعدی در css3
ترنسفرم های سه بعدی در css3
خاصیت css3 transitions
انیمیشن در css3
ستونهای چند گانه در css3
رابط کاربری css3