٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش مرزهای CSS

ویژگی های حاشیه CSS به شما امکان می دهد سبک ، عرض و رنگ حاشیه یک عنصر را تعیین کنید. من از هر طرف مرز دارم.   من یک حاشیه پایین قرمز دارم.   مرزها را گرد کرده ام.  …

محمد یوسفی

7 جولای 2021

ویژگی های حاشیه CSS به شما امکان می دهد سبک ، عرض و رنگ حاشیه یک عنصر را تعیین کنید.


من از هر طرف مرز دارم.

 

من یک حاشیه پایین قرمز دارم.

 

مرزها را گرد کرده ام.

 

من یک مرز چپ آبی دارم.


سبک حاشیه CSS

border-styleمشخص اموال چه نوع از مرز به صفحه نمایش.

مقادیر زیر مجاز است:

  • dotted – حاشیه نقطه ای را مشخص می کند
  • dashed – مرز شکسته را مشخص می کند
  • solid – مرز جامد را مشخص می کند
  • double – مرز دوتایی را مشخص می کند
  • groove– حاشیه شیاردار سه بعدی را تعریف می کند. این اثر به مقدار رنگ حاشیه بستگی دارد
  • ridge– یک حاشیه سه بعدی مشخص می کند. این اثر به مقدار رنگ حاشیه بستگی دارد
  • inset– حاشیه سه بعدی را تعریف می کند. این اثر به مقدار رنگ حاشیه بستگی دارد
  • outset– مرز شروع 3D را مشخص می کند. این اثر به مقدار رنگ حاشیه بستگی دارد
  • none – هیچ مرزی را مشخص نمی کند
  • hidden – یک مرز پنهان را مشخص می کند

border-styleخصوصیت می تواند از یک تا چهار مقدار (برای مرز بالا، مرز سمت راست، مرز پایین، و مرز سمت چپ) است.

مثال

نمایش سبک های مختلف مرزی:

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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

نتیجه:

توجه: هیچ یک از دیگر ویژگی های حاشیه CSS (که در فصل های بعدی بیشتر با آن آشنا خواهید شد) هیچ تأثیری نخواهد داشت مگر اینکه border-styleویژگی تنظیم شود!

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها