مرز جامد css. مدل جعبه CSS

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

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

پارامترهای مشخص کننده قاب: 1) ضخامت قاب، 2) سبک قاب و 3) رنگ قاب. و به ترتیب برویم:

• 1. ضخامت قاب: عرض مرز: 2 پیکسل;
• 2. سبک قاب: سبک حاشیه: جامد;
• 3. رنگ قاب: رنگ لبه: #ff0000;

سبک های قاب در چه مواردی هستند css? در زیر تمام سبک های قاب موجود وجود دارد:

• خط چین - این یک قاب نقطه چین است.
• نقطه چین - این یک قاب نقطه چین است
• جامد - این یک قاب محکم است
• دو برابر - این یک قاب دوتایی است
• شیار - نمای سه بعدی
• خط الراس - نمای سه بعدی
• درونی - نمای سه بعدی
• ابتدا - نمای سه بعدی

اکنون همه چیز برای ایجاد یک مرز در اطراف عنوان داریم.

HTML

یک حاشیه در اطراف عنوان ایجاد کنید.

و سبک برای قاب.

H2 (عرض حاشیه: 2 پیکسل؛ سبک حاشیه: جامد؛ رنگ حاشیه: #FF0000؛ )

در نتیجه یک قاب قرمز جامد با ضخامت 2 پیکسل.

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

• بالا - بالا.
• درست - درست
• پایین - پایین
• ترک کرد - ترک کرد

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

H2(عرض حاشیه-پایین: 2 پیکسل؛ سبک حاشیه-پایین: دوتایی؛ رنگ حاشیه-پایین: #FF0000؛ )

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

h2(عرض حاشیه-پایین: 2 پیکسل؛ سبک حاشیه-پایین: دو برابر؛ رنگ حاشیه-پایین: #FF0000؛ عرض-بالای حاشیه: 2 پیکسل؛ سبک حاشیه-بالا: دو برابر؛ رنگ حاشیه-پایین: # FF0000;)

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

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

تصویر بالا ساختار علامت اختصاری را نشان می دهد که در آن ویژگی مشخص شده است مرز و به عنوان مقادیر، که با یک فاصله از هم جدا شده اند، عرض قاب نشان داده می شود - عرض مرز ، سبک قاب - سبک حاشیه و رنگ قاب #ff0000 .

یعنی مرورگر با دیدن چنین ورودی اختصاری مرز: 2px جامد #ff0000; ، همچنین یک حاشیه در هر چهار طرف هدر ایجاد می کند. این نماد کوتاه معادل نمادی است که در بالا استفاده کردیم (که در آن سه ویژگی اعمال شد).

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

H2 (حاشیه بالا: 2px جامد #ff0000؛ )

بنابراین، با کمک یک ورودی کوتاه، یک قاب از بالا ساخته می شود که در آن ضخامت، سبک و رنگ قاب نیز مشخص می شود.

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

در این فصل:

مدل جعبه راهی برای نمایش عناصر توسط مرورگرها است که همه برچسب ها را به عنوان بلوک های کوچک در نظر می گیرند، برای آنها هر برچسب یک ظرف با محتوا است: متن، تصاویر، برچسب های دیگر و غیره.

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

قاب

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

---

(خط افقی) به عنوان یک مرز عمل می کند.

هر فریم دارای سه ویژگی است که می توانیم با CSS کنترل کنیم: عرض، سبک و رنگ، بیایید ببینیم از چه ویژگی هایی می توانیم برای تنظیم و تغییر آنها استفاده کنیم:

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

پراگراف اول.

پاراگراف دوم.

بند سوم.

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

• border-top - حاشیه بالا
• حاشیه چپ - حاشیه چپ
• حاشیه-راست - حاشیه راست
• حاشیه پایین - حاشیه پایین

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

حاشیه بیرونی و داخلی

تورفتگی- فضای خالی بین محتوای عنصر و مرز آن (اگر یکی تنظیم شده باشد). ویژگی padding برای افزودن و کنترل عرض padding در هر چهار طرف یک عنصر استفاده می شود.

Padding فضای سفیدی است که یک عنصر را از سایر عناصر یا لبه‌های پنجره مرورگر جدا می‌کند. ویژگی margin برای اضافه کردن و کنترل عرض حاشیه ها در هر چهار طرف یک عنصر استفاده می شود.

ویژگی های padding و margin می توانند یک تا چهار مقدار داشته باشند:

جایی که مقادیر در جهت عقربه های ساعت تنظیم می شوند، از بالا شروع می شوند:

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

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

پاراگراف منظم

برای تورفتگی ها و همچنین برای فریم ها، ویژگی هایی وجود دارد که به شما امکان می دهد اندازه تورفتگی را در هر طرف به طور جداگانه کنترل کنید. تورفتگی هاتوسط ویژگی‌ها کنترل می‌شوند: padding-top، padding-right، padding-bottom و padding-left. حاشیه ها توسط ویژگی ها کنترل می شوند: حاشیه-بالا، حاشیه-راست، حاشیه-پایین و حاشیه-چپ.

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

عرض و ارتفاع عنصر

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

ولاد مرژویچ

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

مشخصات کلی

ساده ترین ویژگی برای ایجاد فریم. پارامترهای آن مشابه مرز است، اما در برخی جزئیات به طور قابل توجهی با آن تفاوت دارد:

• طرح کلی در اطراف عنصر ترسیم شده است (حاشیه داخل).
• طرح کلی بر اندازه عنصر تأثیر نمی گذارد (حاشیه به عرض و ارتفاع عنصر اضافه می شود).
• طرح کلی را فقط می توان در اطراف کل عنصر تنظیم کرد، نه در طرف های جداگانه (حاشیه را می توان در هر طرف یا همه به یکبار استفاده کرد).
• طرح کلی تحت تأثیر شعاع گرد مشخص شده توسط ویژگی border-radius قرار نمی گیرد (این روی مرز تأثیر می گذارد).

این سؤال مطرح می شود - در چه مواردی به طرح کلی نیاز است، زمانی که نقش آن، با وجود تفاوت های ذکر شده، به طور کامل توسط مرز به عهده می گیرد؟ موقعیت های زیادی وجود ندارد، اما آنها رخ می دهند:

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

قاب های چند رنگ

همانطور که در مثال 1 نشان داده شده است باید درک کرد که طرح کلی به هیچ وجه جایگزین مرز نمی شود و ممکن است با آن وجود داشته باشد.

مثال 1: یک قاب ایجاد کنید

در این مثال یک حاشیه سیاه در اطراف عنصر اضافه شده است که با یک حاشیه سفید از پس زمینه جدا می شود (شکل 1).

برنج. 1. حاشیه اطراف عنصر

قاب هنگام استفاده: شناور

افزودن یک حاشیه در سراسر حاشیه، عرض عنصر را افزایش می دهد، که هنگام ترکیب مرز و کلاس شبه hover کاملاً قابل توجه است. دو راه برای "برنده شدن" وجود دارد. ساده ترین کار این است که حاشیه را با یک طرح کلی جایگزین کنید، که می دانیم هیچ تاثیری بر اندازه عنصر ندارد (مثال 2).

مثال 2: قاب در حالت شناور

طرح کلی همیشه مناسب نیست، فقط به این دلیل که گوشه های گرد بر آن تأثیر نمی گذارد. روش دوم در اینجا مناسب است - یک حاشیه نامرئی یا حاشیه ای که با رنگ پس زمینه مطابقت دارد اضافه کنید و سپس پارامترهای آن را در شناور تغییر دهید (مثال 3). سپس هیچ جابجایی عنصر رخ نخواهد داد، زیرا قاب در ابتدا وجود دارد. اما همیشه به یاد داشته باشید که عرض عنصر مجموع مقادیر عرض، حاشیه در سمت چپ و حاشیه در سمت راست است. در مورد ارتفاع نیز همینطور است.

مثال 3: قاب در حالت شناور

حاشیه اطراف فیلدهای فرم

برخی از مرورگرها (کروم، سافاری، آخرین نسخه ها Opera) هنگام دریافت فوکوس، یک نماد کوچک در اطراف فیلدهای فرم نمایش می دهد. قاب رنگی(شکل 2). برای حذف آن کافی است مانند مثال 4 مقدار none را به ویژگی outline در استایل ها اضافه کنید.

برنج. 2. در اطراف زمینه ها قاب کنید

مثال 4. قاب را بردارید

فریم ها از طریق جعبه سایه

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

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

مثال 4 نشان می دهد که چگونه می توان دو کادر و یک حاشیه را با استفاده از یک ویژگی box-shadow به سمت راست اضافه کرد.

مثال 4: استفاده از box-shadow

نتیجه این مثالنشان داده شده در شکل 3.

برنج. 3. فریم های ایجاد شده توسط ویژگی box-shadow

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

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

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

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

در مورد چگونگی آن فکر کنید کمک CSSشما می توانید یک شکل مانند این ایجاد کنید:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

کد مثال:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

گزینه های حاشیه بالا (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 - سبک حاشیه سمت چپ عنصر را تنظیم می کند.

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

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

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

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

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

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

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

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

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

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

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

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

کمی تمرین

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

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

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

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

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

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

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