ویژگی css – « مرز” به شما امکان می دهد ضخامت، رنگ و نوع خط را در اطراف محیط اطراف عنصر تنظیم کنید. پارامترهای این ویژگی را می توان در یک خط، با فاصله و به هر ترتیبی از هم جدا کرد.

  • - ضخامت خط یک پیکسل
  • - خط توپر
  • - رنگ سفید
  • - رنگ سیاه
  • - رنگ خاکستری

حاشیه عنصر جامد

مرز عنصر چین خورده

حاشیه عنصر نقطه‌دار

مرز عنصر دو خط

اموال تک تک بخش های مرز

قاب موجدار در حجم

قاب موجدار محدب در حجم

قاب فشرده حجمی

قاب محدب حجمی

درس / CSS /

درس 7

تقریباً هر سایتی از یک ویژگی استفاده می کند که یک حاشیه در اطراف یک عنصر ایجاد می کند. یا برای دکمه ها یا برای بلوک های دارای متن مورد نیاز است. برای ایجاد حاشیه، یک عنصر در CSS دو ویژگی دارد: border و outline. بیایید آنها را در نظر بگیریم.

مرز

این ویژگی برای تنظیم یک فریم در اطراف عنصر مورد نیاز است، مرز آن را در سند وب نشان می دهد، عرض فریم هنگام قرار دادن عنصر در نظر گرفته می شود. دارای 3 مقدار - رنگ، ضخامت و نوع قاب.

نحو برای ویژگی border به شرح زیر است:

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

ضخامت (عرض) فریم باید بر حسب پیکسل (px) یا درصد (%) مشخص شود.
رنگ را می توان در هر دو تنظیم کرد فرمت RGB(قرمز سبز آبی)، یا در کد HTML HEX.

در زیر آمده است انواع خطبا نام آنها:

چگونه برای یک عنصر مرز تعیین کنیم؟ ما این کار را به صورت زیر انجام می دهیم:

#مسدود کردن(
حاشیه: 3px جامد #0085ss; /* خط را روی 3 پیکسل آبی ضخیم تنظیم کنید */
}

اگر می خواهید یک، دو یا سه نصب کنید قاب در یک طرف، سپس به صورت زیر مشخص کنید:

بالای مرز- فریم بالا
لبه پایین- قاب پایین
لبه چپ- قاب در سمت چپ؛
مرز راست- قاب در سمت راست؛

مسدود کردن (
حاشیه سمت راست: 3px جامد #0085cc;
حاشیه-پایین: 2px خط چین #0085cc;
}

اگر شما می خواهید قاب ها را حذف کنیدعنصر در CSS، سپس در مرز ویژگی بنویسید - هیچ

خالی(
مرز: هیچ /* عنصر با کلاس خالی حاشیه نخواهد داشت */
}

طرح کلی

Outline یک ویژگی است که برای تنظیم مرز بیرونی یک عنصر مورد نیاز است.

وجود دارد دو تفاوت با مرز:
اولاً، خط مشخص شده در طرح کلی بر موقعیت خود بلوک، عرض و ارتفاع آن تأثیر نمی گذارد.
ثانیا امکان نصب قاب از سمت خاصی وجود ندارد.
نحو همان مرز است.

طرح کلی: 2px نقطه‌گذاری #0085cc; /* حاشیه 2 پیکسل آبی نقطه‌دار */
برای طرح کلی، و همچنین برای حاشیه، می توانید مرزها را با نوشتن هیچ حذف کنید:

با تشکر از توجه شما!

مقاله قبلی
درس 6

مرزهای عنصر

padding و حاشیه در CSS. حاشیه و بالشتک چیست؟ مقاله بعدی
درس 8. چگونه رنگ متن و پس زمینه یک عنصر را در CSS تنظیم کنیم؟

نظرات در مورد مقاله (vk.com)

مرز

پشتیبانی مرورگر

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

شرح

ویژگی CSS به شما این امکان را می دهد که عرض، سبک و رنگ را برای حاشیه بلوک به طور همزمان تنظیم کنید. حاشیه بلوک یک خط/قاب ساده است که بلوک را از همه طرف احاطه کرده است. باید در نظر داشت که هنگام اضافه کردن یک قاب، بر اندازه کلی بلوک تأثیر می گذارد.

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

توجه: برای تنظیم مرزها فقط در طرف های خاصی از یک عنصر، از ویژگی های زیر استفاده کنید: border-top، border-bottom، border-left، border-right.

نکته: به عنوان یک قاعده، هنگام استفاده از حاشیه، باید بالشتک اضافه کنید.

ویژگی CSS: مرز

آنها فضای سفید بین مرز بلوک و محتوای آن اضافه می کنند: متن، تصاویر یا برچسب های فرزند. معمولاً حاشیه نزدیک به محتوای عنصر نمایش داده می شود، این فقط در صورتی مفید است که نیاز به تنظیم حاشیه در اطراف تصویر داشته باشید.

نحو

border: border-width border-style border-color|ارث بری;

ارزش های دارایی

مثال

مثال

متنی در اینجا وجود دارد.

نتیجه این مثالدر پنجره مرورگر:

نحوه تنظیم رنگ، سبک و اندازه حاشیه در کادرها.

در زبان های نشانه گذاری، مرز( مرز)، فقط جداول، عکس و قاب داشته باشد، در برخی موارد امکان تنظیم رنگ حاشیه وجود دارد و بس.

ویژگی مرزی

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

در CSS می توانیم عرض حاشیه (حاشیه) را با آن کنترل کنیم عرض مرزو برای دقیق تر، می توانیم ضخامت هر ضلع را جداگانه کنترل کنیم:
پهنای حاشیه بالا- ضخامت حاشیه بالایی
حاشیه-راست-عرض- ضخامت حاشیه سمت راست
حاشیه-پایین-عرض- ضخامت حاشیه پایین
حاشیه-چپ-عرض- ضخامت حاشیه سمت چپ
اما می توان آن را نیز کوتاه کرد:
P (عرض حاشیه: بالا سمت راست پایین سمت چپ؛)(بالا سمت راست پایین سمت چپ).
عرض حاشیه را می توان تنظیم کرد:
ارقام DIV (عرض مرز: 5 پیکسل)، از صفر تا بی نهایت، یعنی. مثبت
لاغر- حاشیه نازک، DIV (عرض حاشیه: نازک)
متوسط- حاشیه میانی، DIV (عرض حاشیه: متوسط)
ضخیم- حاشیه ضخیم، DIV (عرض حاشیه: ضخیم)
با اعداد واضح است، اما با این مقادیر همه چیز به مرورگر بستگی دارد، اما همچنان لاغر<= medium <= thick .

ما همچنین می توانیم رنگ حاشیه را با رنگ لبهیا به طور دقیق تر رنگ هر طرف:
رنگ حاشیه بالارنگ حاشیه بالایی
حاشیه-راست-رنگرنگ حاشیه سمت راست؛
رنگ حاشیه پایینرنگ حاشیه پایین؛
حاشیه-چپ-رنگرنگ حاشیه در سمت چپ
مقدار رنگ به عنوان برای تنظیم شده است رنگ، یعنی یکی از 16 رنگ: آبی، مشکی، آبی، فوشیا، خاکستری، سبز، لیمویی، مارونی، سرمه ای، زیتونی، بنفش، قرمز، نقره ای، آبی، سفید یا زرد، همچنین می توانید رنگ ها را تنظیم کنید: رنگ:#000000, رنگ:#AF0 , رنگ: rgb (255,0,0)یا رنگ: rgb (100٪، 0٪، 0٪).
مهم نیست چه طرح رنگی را انتخاب می کنید، مرورگرها همچنان آن را به آن ترجمه می کنند رنگ: rgb (255,0,0). مثلا رنگ:آهکی = رنگ:#00ff00 = رنگ:#0F0 = رنگ: rgb (0٪، 100٪، 0٪)، اما برای مرورگر مهم نیست رنگ: rgb (0,255,0)، یعنی این مقدار را محاسبه خواهد کرد.

اگر ضخامت و رنگ حاشیه را نیز بتوان با HTML کنترل کرد، سبک ( سبک حاشیه) فقط CSS!!!
سبک را می توان توسط هر طرف به طور جداگانه کنترل کرد:
به سبک حاشیه بالاسبک حاشیه بالا؛
به سبک حاشیه راستسبک حاشیه سمت راست؛
سبک حاشیه پایینسبک حاشیه پایین؛
به سبک حاشیه چپسبک حاشیه در سمت چپ.
اکنون مقادیر سبک ها را در نظر بگیرید:
1)سبک حاشیه: هیچکدام- این مقدار پیش فرض است، شبیه به border-width:0.
2)border-style:hidden- همینطور به جز جداول (جدول) که بعداً بررسی خواهیم کرد.
3)حاشیه‌دار: نقطه‌چین- حاشیه ای از نقاط.
4)حاشیه به سبک: چین خورده- حاشیه از یک خط نقطه چین.
5)سبک حاشیه: جامد- حاشیه خط جامد، یعنی. مانند HTML
6)سبک حاشیه: دوتایی- حاشیه یک خط دوتایی، در اینجا به ضخامت (عرض حاشیه) حداقل 3 پیکسل نیاز دارید.
7)حاشیه به سبک: شیار- حاشیه به نظر می رسد که به صورت بوم بریده شده است.
8)حاشیه به سبک: خط الراس- حاشیه به نظر می رسد که از روی بوم بیرون زده است.
9)border-style: inset- کل جعبه به نظر می رسد که در بوم فشرده شده است.
10)حاشیه به سبک: شروع- برعکس قبلی.
برخی از مرورگرها ممکن است مقادیر نقطه چین، چین، دوتایی، شیار، برآمدگی، ورودی و خروجی را نادیده بگیرند و آنها را به صورت یکپارچه، یعنی. مرز معمولی

البته همه اینها درست است، اما تمام مثال های بالا فقط اصل عمل هستند و یک مکانیسم نیستند.
دارایی قانون مرزبه معنای (حاشیه: رنگ سبک اندازه؛)، این قانون در صورتی اجرا می شود که هر سه مقدار وجود داشته باشد و فقط به این ترتیب، برای مثال H1 (حاشیه: 5 پیکسل دو برابر قرمز؛)، اما اگر این مقادیر توسط زبان های نشانه گذاری، به عنوان مثال، برای یک جدول ارائه شده باشد، ممکن است استثناهایی وجود داشته باشد TABLE (حاشیه: 2 پیکسل)، یعنی فقط یک مقدار داده شده است.

برای مدیریت نه کل حاشیه، بلکه هر قسمت به طور جداگانه، قوانینی وجود دارد:
(حاشیه بالا: رنگ سبک اندازه؛)کنترل حاشیه بالایی؛
(حاشیه سمت راست: رنگ سبک اندازه؛)کنترل مهار در سمت راست؛
(حاشیه پایین: رنگ سبک اندازه؛)کنترل حاشیه پایین.
(حاشیه سمت چپ: رنگ سبک اندازه ؛)کنترل مهار در سمت چپ.
این قوانین را می توان به صورت جداگانه یا همه با هم استفاده کرد.

استثنا این قاعده است:
H1(
حاشیه: 4 پیکسل سبز ثابت؛
}
مسئله این است که در CSS آخرین قانون دارای بالاترین اولویت است، در این مورد خاصیت border حاوی border-left است و بنابراین قانون border-left نادیده گرفته می شود، درست مانند این:
H1(
حاشیه: 4 پیکسل سبز ثابت؛
حاشیه سمت چپ: 2 پیکسل دو برابر قرمز.
}
ابتدا قوانین را برای کل حاشیه و سپس برای بخش های جداگانه تنظیم می کنیم.

من همه چیز در مورد مرزها برای عناصر دارم، به جز اینکه وقتی به جداول و سایر استثناها می رسیم، برخی از ویژگی ها را در نظر می گیریم.

css: مرز. مرزهای عنصر

مرزهای CSS3

مرزهای CSS3

با CSS3 می‌توانید حاشیه‌های گرد ایجاد کنید، سایه‌ها را به کانتینرها اضافه کنید و از یک تصویر به عنوان حاشیه استفاده کنید—همه اینها بدون استفاده از برنامه طراحی مانند فتوشاپ.

در این درس با ویژگی های حاشیه زیر آشنا می شوید:

  • شعاع مرزی
  • سایه جعبه
  • تصویر مرزی

پشتیبانی مرورگر

ویژگی پشتیبانی مرورگر
شعاع مرزی
سایه جعبه
تصویر مرزی

اینترنت اکسپلورر 9 برخی از ویژگی های حاشیه جدید را پشتیبانی می کند.

فایرفاکس به پیشوند -moz- برای تصویر حاشیه نیاز دارد.

کروم و سافاری به پیشوند -webkit- برای تصویر حاشیه نیاز دارند.

Opera برای تصویر حاشیه نیاز به -o- دارد.

سافاری همچنین به پیشوند -webkit- برای box-shadow نیاز دارد.

Opera از ویژگی های مرزی جدید پشتیبانی می کند.

CSS3 گوشه های گرد

افزودن گوشه های گرد در CSS2 مشکل بود. برای هر گوشه باید از تصاویر مختلفی استفاده می کردیم.

در CSS3 ایجاد گوشه های گرد آسان است.

در CSS3 از ویژگی border-radius برای ایجاد گوشه های گرد استفاده می شود:

این بلوک گوشه های گرد دارد!

سایه کانتینر CSS3

در CSS3 از ویژگی box-shadow برای افزودن سایه به جعبه ها استفاده می شود:

CSS3 Border-Image

با ویژگی CSS3 border-image، می توانید از یک تصویر برای ایجاد حاشیه استفاده کنید:

ویژگی border-image به شما امکان می دهد یک حاشیه تصویر را مشخص کنید!

تصویر اصلی مورد استفاده برای ایجاد حاشیه متعلق به شماست:

ویژگی های مرزی جدید

ویژگی مرزی

ویژگی مرزی، برچسب

، برای تعیین ضخامت حاشیه دور میز استفاده می شود.

مرزهای HTML

استفاده از حاشیه بدون مقادیر قابل قبول است، سپس ضخامت حاشیه برابر با یک پیکسل خواهد بود. به‌طور پیش‌فرض، فریم با جلوه‌های سه بعدی نمایش داده می‌شود، اما اگر ویژگی پس‌زمینه را نیز اعمال کنید، قاب «مسطح» می‌شود.

علاوه بر این، اگر مشخصه border دارای مقدار غیر صفر باشد، مرورگرها نیز مرزهای نازکی را در اطراف سلول‌ها نشان می‌دهند. نمایش این مرزها را می توان با استفاده از ویژگی قوانین کنترل کرد.

ارزش های

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

مقدار پیش فرض: 0.

نحو

ویژگی مورد نیاز: هیچ.

مثال HTML: اعمال ویژگی Border

نتیجه مثال

نتیجه. اعمال ویژگی border.

مایکل 2016-06-11 1 HTML و CSS 0

چگونه یک حاشیه دوتایی در css درست کنیم؟

سلام به همه. آیا می دانید چگونه یک حاشیه دوتایی در css بسازید؟ اگر نه، پس لطفا این یادداشت کوتاه را بخوانید. نکته این است که با یک حاشیه معمولی نمی توانید این کار را انجام دهید، باید راه دیگری را طی کنید.

اگر مرزی را با ویژگی border تنظیم کنید، فقط می توانید یکی را تنظیم کنید. اما اغلب، طراحی ممکن است به چندین قاب نیاز داشته باشد. در این مورد، شما باید از یک شبه قاب - یک سایه استفاده کنید.

حاشیه دوتایی با جعبه سایه

به طور کلی، اگر می خواهید سایه را در css با جزئیات بیشتری مطالعه کنید، به شما توصیه می کنم در مورد موضوع مربوطه مطالعه کنید. در این مقاله، سینتکس ویژگی را به طور کامل توضیح نمی دهم، بلکه به سادگی نحوه ایجاد یک حاشیه دوگانه را به شما نشان می دهم. بنابراین، من یک بلوک معمولی ایجاد می کنم، که برای آن برخی از سبک ها را تجویز می کنم. بلوک می تواند هر محتوایی و با هر محتوایی باشد. در مورد من، این یک div ساده است، بنابراین من حتی کد html را نشان نمی دهم. و در اینجا سبک ها وجود دارد:

Div(
پس زمینه: #E0D8A3;
عرض: 180 پیکسل
ارتفاع: 110 پیکسل؛
بالشتک: 12 پیکسل
}

خوب، یک نمونه معمولی از طراحی بلوک.
حالا بیایید با استفاده از چندین سایه یک حاشیه دوتایی ایجاد کنیم. من ویژگی زیر را به استایل های بلاک اضافه می کنم:

جعبه-سایه: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

این شکلی است که به نظر می رسد:

همانطور که می بینید، بسیار زیبا بود. فقط 5 پارامتر در box-shadow وجود دارد. اولی افست افقی سایه، دومی افست عمودی است. پارامترهای سوم و چهارم تاری و کشش هستند. همانطور که می بینید ما به سه مورد اول اصلا دست نمی زنیم. ما نیازی به تاری نداریم، زیرا به یک سایه تیز نیاز داریم. همانطور که می بینید، من پارامتر چهارم - کشش را تجویز کردم. تعیین می کند که سایه چقدر بزرگتر از عنصری است که به آن متصل است.

به طور پیش فرض، همه چیز به این شکل است - سایه به اندازه عنصر است و به وضوح زیر آن قرار دارد. اگر کشش را تغییر دهید، سایه شروع به بیرون زدن از عنصر می کند. به این ترتیب می توانید مرزها را دقیقاً مشابه ویژگی border ایجاد کنید. خوب، با پارامتر پنجم، من فکر می کنم همه چیز روشن است - این رنگ سایه است.

همانطور که می بینید، من به سادگی پارامترهای هر سایه جدید را با کاما از هم جدا کردم. فکر می کنم قبلا حدس زده اید که به همین ترتیب می توانید یک مرز سه گانه و غیره ایجاد کنید. در اینجا هیچ محدودیتی وجود ندارد. راستی در مورد من موضوع بسته شده است و اگر سوالی داشتید می توانید در نظرات بنویسید.

یک دقیقه از توجه شما:همه ما می خواهیم سایت های خود را در یک هاست قابل اعتماد قرار دهیم. من صدها میزبان را تجزیه و تحلیل کردم و بهترین هاست را پیدا کردم - HostIQصدها نظر مثبت در مورد آن در شبکه وجود دارد، میانگین امتیاز کاربران 4.8 از 5 است. بگذارید سایت شما خوب باشد.

شرح

ویژگی border universal به شما امکان می دهد به طور همزمان عرض، سبک و رنگ حاشیه را در اطراف یک عنصر تنظیم کنید. مقادیر می توانند به هر ترتیبی بروند و با یک فاصله از هم جدا شوند، مرورگر تعیین می کند که کدام یک با ویژگی مورد نظر مطابقت دارد. برای تنظیم یک حاشیه فقط در طرف های خاصی از یک عنصر، از ویژگی های border-top، border-bottom، border-left، border-right استفاده کنید.

نحو

ارزش های

مقدار border-width عرض حاشیه را تعیین می کند. چندین مقدار به سبک حاشیه برای کنترل ظاهر آن ارائه شده است. نام آنها و نتیجه عمل در شکل نشان داده شده است. یکی

عکس. 1. سبک های قاب

border-color رنگ حاشیه را تعیین می کند، مقدار می تواند در هر فرمت CSS معتبر باشد.

ارث بردن ارزش والد را به ارث می برد.

HTML5 CSS2.1 IE Cr Op Sa Fx

مرز

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

در این مثال یک حاشیه دوتایی در اطراف لایه اضافه شده است. نتیجه در شکل نشان داده شده است. 2.

برنج. 2. اعمال اموال مرزی

مدل شی

document.getElementById("elementID").style.border

مرورگرها

اینترنت اکسپلورر تا نسخه 6 شامل نقطه چین با عرض حاشیه 1 پیکسل است. در 2 پیکسل و بالاتر، مقدار نقطه به درستی کار می کند. این باگ در IE7 رفع شده است، اما فقط برای تمام مرزهای 1px. اگر یکی از حاشیه های جعبه 2 پیکسل یا ضخیم تر باشد، در IE7 نقطه چین می شود.

اینترنت اکسپلورر تا نسخه 7.0 از مقدار ارثی پشتیبانی نمی کند.

هنگام استفاده از مقادیر groove، ridge، inset یا outset، ممکن است سبک حاشیه بین مرورگرها کمی متفاوت باشد.

شرح

ویژگی border universal به شما امکان می دهد به طور همزمان عرض، سبک و رنگ حاشیه را در اطراف یک عنصر تنظیم کنید. مقادیر می توانند به هر ترتیبی بروند و با یک فاصله از هم جدا شوند، مرورگر تعیین می کند که کدام یک با ویژگی مورد نظر مطابقت دارد. برای تنظیم یک حاشیه فقط در طرف های خاصی از یک عنصر، از ویژگی های border-top، border-bottom، border-left، border-right استفاده کنید.

نحو

ارزش های

مقدار border-width عرض حاشیه را تعیین می کند. چندین مقدار به سبک حاشیه برای کنترل ظاهر آن ارائه شده است. نام آنها و نتیجه عمل در شکل نشان داده شده است. یکی

عکس. 1. سبک های قاب

border-color رنگ حاشیه را تعیین می کند، مقدار می تواند در هر فرمت CSS معتبر باشد.

ارث بردن ارزش والد را به ارث می برد.

HTML5 CSS2.1 IE Cr Op Sa Fx

مرز

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

در این مثال یک حاشیه دوتایی در اطراف لایه اضافه شده است. نتیجه در شکل نشان داده شده است. 2.

برنج. 2. اعمال اموال مرزی

مدل شی

document.getElementById("elementID").style.border

مرورگرها

اینترنت اکسپلورر تا نسخه 6 شامل نقطه چین با عرض حاشیه 1 پیکسل است. در 2 پیکسل و بالاتر، مقدار نقطه به درستی کار می کند. این باگ در IE7 رفع شده است، اما فقط برای تمام مرزهای 1px. اگر یکی از حاشیه های جعبه 2 پیکسل یا ضخیم تر باشد، در IE7 نقطه چین می شود.

اینترنت اکسپلورر تا نسخه 7.0 از مقدار ارثی پشتیبانی نمی کند.

هنگام استفاده از مقادیر groove، ridge، inset یا outset، ممکن است سبک حاشیه بین مرورگرها کمی متفاوت باشد.

ویژگی border generic برای کنترل مرز یک عنصر استفاده می شود. این ویژگی به شما امکان می دهد عرض، سبک و رنگ حاشیه یک عنصر را در یک اعلان تنظیم کنید.

این سه ویژگی (عرض، سبک و رنگ حاشیه) را می توان در یک اعلان تنظیم کرد. به عنوان مثال:

مرزها در CSS

یک div با حاشیه قرمز 3 پیکسل.

شما فقط می توانید یک سبک حاشیه را در یک طرف یک عنصر مشخص کنید. برای این کار از ویژگی های border-top (حاشیه بالا)، border-right (حاشیه سمت راست)، border-bottom (مرز پایین)، border-left (حاشیه چپ) استفاده کنید.

مرزها در CSS

یک بلوک div با مرزهای مختلف.

در این مثال، هر طرف بلوک ضخامت، سبک و رنگ خود را دارد.

استفاده از CSS را برای ایجاد شکلی مانند زیر در نظر بگیرید:

مقادیر حاشیه - ضخامت، سبک و رنگ - را می توان به طور جداگانه با استفاده از ویژگی های خاص تنظیم کرد.

  • border-style - سبک حاشیه.
  • border-width - عرض حاشیه.
  • border-color - رنگ حاشیه.

بیایید هر یک از مقادیر را جداگانه در نظر بگیریم.

اموال به سبک مرزی. سبک حاشیه.

ویژگی border-style سبک حاشیه را تنظیم می کند. در CSS، بر خلاف HTML، حاشیه یک عنصر می تواند چیزی بیش از یک جامد باشد. مقادیر معتبر برای سبک حاشیه عبارتند از:

  1. هیچ - بدون حاشیه (پیش فرض).
  2. جامد - حاشیه جامد.
  3. حاشیه دوتایی
  4. نقطه چین - حاشیه.
  5. نقطه چین - حاشیه ای که از یک سری نقطه تشکیل شده است.
  6. خط الراس - مرز "رج".
  7. شیار - مرز "شیار".
  8. inset - حاشیه درج شده.
  9. ابتدا - مرز اکسترود شده.

نمونه هایی از ظاهر آنها

بدون مرز (هیچ)


حاشیه جامد (جامد)


حاشیه دوتایی (دوبل)


حاشیه نقطه چین (نقطه دار)


حاشیه نقطه چین (چین)


حاشیه شیار (شیار)


حاشیه خط الراس


حاشیه تورفته (در داخل)


حاشیه اکسترود شده (ابتدا)

ضمناً اگر رنگ حاشیه را برای قاب رج روی مشکی قرار دهید، نتیجه زیر را خواهید گرفت.

بلوک div با حاشیه سیاه و سبک خط الراس.

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

با کمک ویژگی border-style، سبک حاشیه را می توان نه تنها برای همه طرف های بلوک تنظیم کرد. ممکن است چندین مقدار برای یک ویژگی به سبک مرزی تنظیم کنید، بسته به تعداد مقادیر، سبک حاشیه به تعداد متفاوتی از اضلاع بلوک اختصاص داده می شود. شما می توانید یک، دو، سه یا چهار مقدار را تنظیم کنید. بیایید به مثال هایی برای هر مورد نگاه کنیم.

یک مقدار (جامد) - سبک حاشیه برای همه طرف های بلوک تنظیم شده است.


دو مقدار (دبل جامد) - مقدار اول استایل را برای دو طرف بالا و پایین تنظیم می کند، دومی برای طرف.


سه مقدار (دو نقطه جامد) - مقدار اول برای سمت بالا، دومی برای طرفین، سومین مقدار برای پایین.


چهار مقدار (مثل دو نقطه چین) - هر مقدار برای یک طرف در جهت عقربه های ساعت از بالا.

ویژگی عرض مرز. ضخامت حاشیه - ضخامت لبه.

ویژگی border-width برای تنظیم عرض حاشیه یک عنصر استفاده می شود. ضخامت حاشیه را می توان در هر واحد اندازه گیری مطلق، مانند پیکسل ها مشخص کرد.

مانند ویژگی border-style، ویژگی را نیز می توان روی یک تا چهار مقدار تنظیم کرد. برای هر مورد مثال هایی را در نظر بگیرید.



کد مثال:

ضخامت حاشیه CSS

یک مقدار (2px) - ضخامت حاشیه برای همه طرف های بلوک تنظیم شده است.

دو مقدار (1px 5px) - مقدار اول ضخامت را برای دو طرف بالا و پایین تنظیم می کند، دومی برای طرف.

سه مقدار (1px 3px 5px) - مقدار اول برای سمت بالا، دومی برای طرفین، سومین مقدار برای پایین.

چهار مقدار (1px 3px 5px 7px) - هر مقدار برای یک سمت در جهت عقربه های ساعت از بالا.

همچنین مقادیر کلیدواژه برای ویژگی border-width وجود دارد. در کل سه مورد وجود دارد:

  • نازک - حاشیه نازک؛
  • ضخامت متوسط ​​- متوسط؛
  • حاشیه ضخیم - ضخیم؛

ضخامت حاشیه: نازک.


ضخامت حاشیه: متوسط.


ضخامت حاشیه: ضخیم.

ویژگی رنگ حاشیه. رنگ لبه.

امکانات حاشیه رنگ برای کنترل رنگ حاشیه استفاده می شود. رنگ های این ویژگی را می توان با استفاده از هر یک از روش های توضیح داده شده در مقاله Colors در CSS تنظیم کرد، یعنی:

  • نماد هگزادسیمال (#ff00aa ) رنگ.
  • فرمت RGB rgb (255,12,110) است. فرمت RGBA برای CSS3.
  • فرمت های HSL و HSLA برای CSS3.
  • نام رنگ، به عنوان مثال سیاه و سفید (سیاه). برای فهرست کاملی از نام رنگ ها، به جدول CSS Color Names مراجعه کنید.

ویژگی border-color همچنین می تواند یک تا چهار مقدار داشته باشد و آنها را مشابه با ویژگی های قبلی رفتار می کند.

یک مقدار (قرمز).


دو مقدار (قرمز سیاه).


سه مقدار (قرمز سیاه زرد).


چهار مقدار (قرمز مشکی زرد آبی).

حالا بیایید به وظیفه ای که در بالا گفته شد برگردیم و یک شکل بکشیم:

در اینجا کدی است که چنین شکلی را ترسیم می کند، فقط بزرگتر:

ضخامت حاشیه CSS

تنظیم مقادیر برای طرفین به طور جداگانه

همانطور که در بالا ذکر شد، شما فقط می توانید مقادیر ویژگی مرزی را برای یک طرف یک بلوک مشخص کنید. برای این اهداف، خواص وجود دارد:

  • حاشیه بالا (حاشیه بالا)
  • حاشیه راست (حاشیه سمت راست)
  • حاشیه پایین (حاشیه پایین)
  • حاشیه-چپ (حاشیه چپ)

اجازه دهید یادآوری کنم که برای همه ویژگی ها، سه مقدار (ضخامت، سبک و رنگ) به هر ترتیب مشخص شده است. اما ویژگی هایی وجود دارد که به شما امکان می دهد ضخامت، رنگ و سبک را برای هر طرف جداگانه تنظیم کنید. نگارش این خواص برگرفته از مطالب فوق است.

گزینه های حاشیه بالا (border-top).

  • border-top-color - رنگ حاشیه بالایی یک عنصر را تنظیم می کند.
  • border-top-width - عرض حاشیه بالایی یک عنصر را تنظیم می کند.
  • border-top-style - سبک حاشیه بالایی عنصر را تنظیم می کند.

گزینه های حاشیه سمت راست (حاشیه-راست).

  • border-right-color - رنگ حاشیه سمت راست عنصر را تعیین می کند.
  • border-right-width - عرض حاشیه سمت راست عنصر را تنظیم می کند.
  • border-right-style - سبک حاشیه سمت راست عنصر را تنظیم می کند.

گزینه های حاشیه پایین (حاشیه-پایین).

  • border-bottom-color - رنگ حاشیه پایین یک عنصر را تنظیم می کند.
  • border-bottom-width - عرض حاشیه پایین یک عنصر را تنظیم می کند.
  • border-bottom-style - سبک حاشیه پایین یک عنصر را تنظیم می کند.

گزینه های حاشیه سمت چپ (حاشیه-چپ).

  • border-left-color - رنگ حاشیه سمت چپ عنصر را تعیین می کند.
  • border-left-width - عرض حاشیه سمت چپ عنصر را تنظیم می کند.
  • border-left-style - سبک حاشیه سمت چپ عنصر را تنظیم می کند.

نمونه ای از استفاده از این ویژگی ها:

ضخامت حاشیه CSS

در این مثال، ابتدا به بلوک div یک حاشیه 3 پیکسلی و یک استایل جامد در هر طرف داده می شود. سپس:
  • رنگ حاشیه بالایی را با ویژگی border-top-color به قرمز بازتعریف کرد،
  • با استفاده از ویژگی border-right-width، ضخامت حاشیه سمت راست روی 10px تنظیم می شود.
  • با استفاده از ویژگی border-bottom-style، سبک حاشیه پایین به صورت double تعریف می شود.
  • با استفاده از ویژگی border-left-color، حاشیه سمت چپ روی آبی تنظیم می شود.

ویژگی مرزی شعاع. گرد کردن گوشه های مرز.

ویژگی border-radius برای گرد کردن گوشه‌های مرزهای یک عنصر است. این ویژگی در CSS3 معرفی شده است و در تمام مرورگرهای مدرن به جز اینترنت اکسپلورر 8 (و نسخه های قدیمی تر) به درستی کار می کند.

مقادیر می توانند هر عددی باشد که در CSS استفاده می شود.

شعاع مرزی: 15 پیکسل.

اگر قاب بلوک تنظیم نشده باشد، گرد کردن پس‌زمینه اتفاق می‌افتد. در اینجا نمونه ای از گرد کردن بلوک بدون حاشیه اما با رنگ پس زمینه آورده شده است:

شعاع مرزی: 15 پیکسل.

ویژگی هایی برای گرد کردن هر گوشه از یک عنصر وجود دارد. این مثال از همه آنها استفاده می کند:

شعاع حاشیه-بالا-چپ: 15 پیکسل؛ حاشیه-بالا-راست-شعاع: 0; حاشیه-پایین-راست-شعاع: 15 پیکسل. شعاع حاشیه-پایین-چپ: 0;

شعاع مرزی: 15 پیکسل.

اگرچه این کد را می توان در یک اعلان نوشت: border-radius : 15px 0 15px 0 . واقعیت این است که برای ویژگی border-radius، می توانید از یک تا چهار مقدار تنظیم کنید. جدول زیر به طور خلاصه قوانین حاکم بر چنین اظهاراتی را نشان می دهد.

با مطالعه دقیق این جدول می توانید متوجه شوید که کوتاه ترین ورودی برای سبک مورد نظر این خواهد بود: border-radius : 15px 0 . فقط دو مقدار وجود دارد.

کمی تمرین

با استفاده از CSS یک لیمو بکشید.

در اینجا کد چنین بلوکی آمده است:

حاشیه: 0 خودکار; /* بلوک را در مرکز قرار دهید */ عرض: 200 پیکسل. ارتفاع: 200 پیکسل؛ پس زمینه: #F5F240; حاشیه: 1px جامد #F0D900; حاشیه-شعاع: 10px 150px 30px 150px.

ما قبلاً شکل را ترسیم کرده ایم:

حالا بیایید یک مثلث از آن باقی بگذاریم:

کد مثلث این است:

حاشیه: 0 خودکار; /* بلوک را در مرکز قرار دهید */ padding: 0px; عرض: 0 پیکسل ارتفاع: 0; حاشیه: 30 پیکسل سفید جامد؛ رنگ حاشیه پایین: قرمز؛

2022 bar812.ru. فقط در مورد مجتمع برنامه ها. اهن. اینترنت. پنجره ها