تقسیم گرد. گوشه های گرد با استفاده از CSS

شما همچنین می توانید لبه های گرد را فقط برای گوشه های بالا یا پایین عنصر ایجاد کنید، یا به هر گوشه شعاع گرد متفاوتی بدهید - خلاقیت زیادی! مثال:

BorderElement (رنگ پس‌زمینه: #EEDDFF؛ حاشیه: 6 پیکسل توپر # 7922CC؛ شعاع حاشیه: 25 پیکسل؛) .borderElement1 (رنگ پس‌زمینه: # FFE8DB؛ حاشیه: 6 پیکسل ثابت # FF5A00؛ شعاع حاشیه: 15 پیکسل 10 پیکسل، 100 پیکسل؛ 15 پیکسل، 100 پیکسل).

اما این همه چیز نیست: به جای گوشه های گرد ساده، می توانید یک فیله بیضوی را مشخص کنید. برای انجام این کار، باید دو مقدار را که با یک اسلش از هم جدا شده اند (برای نیم محورهای افقی و عمودی بیضی) مشخص کنید. در اینجا یک مثال در یک بلوک 150 × 450 پیکسل آورده شده است:

BorderElement (رنگ پس‌زمینه: #EEDDFF؛ حاشیه: ۶ پیکسل جامد # 7922CC؛ شعاع حاشیه: 280 پیکسل / 100 پیکسل؛)

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

• شعاع حاشیه-بالا-چپ - برای گوشه بالا سمت چپ؛
• حاشیه-بالا-راست-شعاع - برای گوشه بالا سمت راست؛
• شعاع حاشیه-پایین-چپ - برای گوشه پایین سمت چپ؛
• حاشیه-پایین-راست-شعاع - برای گوشه پایین سمت راست.

اصل گرد کردن گوشه

تصویر زیر نحوه محاسبه گرد کردن گوشه در CSS را نشان می دهد. بنابراین، اگر یک مقدار واحد برای گوشه مشخص شود - به عنوان مثال، 20px - به این معنی است که گرد کردن در امتداد دایره ای با شعاع 20 پیکسل رخ می دهد. در صورتی که دو مقدار با یک اسلش از هم جدا شوند، به عنوان مثال، 30px / 20px، گوشه ها در امتداد یک بیضی گرد می شوند. اولین مقدار در این مورد طول نیم محور افقی بیضی - 30 پیکسل و دوم - طول نیم محور عمودی - 20 پیکسل است:

ویژگی CSS border-radius توسط تمام نسخه های مدرن مرورگرها پشتیبانی می شود.

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

جدول 1 تعداد متفاوتی از مقادیر و نوع بلوکی که در این مورد به دست می آید را نشان می دهد.

کد	شرح	چشم انداز
div (شعاع حاشیه: 10 پیکسل؛)	شعاع گرد برای همه گوشه ها به طور همزمان.
div (شعاع حاشیه: 0 10 پیکسل؛)	مقدار اول شعاع گوشه های بالا-چپ و پایین-راست را تعیین می کند، مقدار دوم گوشه های بالا-راست و پایین-چپ را تعیین می کند.
div (شعاع حاشیه: 20 پیکسل 10 پیکسل 0؛)	مقدار اول شعاع گوشه سمت چپ بالا، دوم - به طور همزمان بالا سمت راست و پایین سمت چپ، و مقدار سوم - سمت راست پایین را مشخص می کند.
div (شعاع حاشیه: 20 پیکسل 10 پیکسل 5 پیکسل 0؛)	به صورت متوالی شعاع گوشه بالا سمت چپ، گوشه بالا سمت راست، گوشه پایین سمت راست و گوشه پایین سمت چپ را تنظیم می کند.

مثال 1 ایجاد یک بلوک با گوشه های گرد را نشان می دهد.

مثال 1. گوشه های بلوک

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

برنج. 1. بلوک با گوشه های گرد

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

مثال 2. دکمه گرد

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

برنج. 2. دکمه گرد

در مرورگر Opera، گرد کردن به اگر مرز از طریق ویژگی border تنظیم نشده باشد، به اشتباه اعمال می شود.

ویژگی border-radius را می توان با ویژگی های دیگر ترکیب کرد، مانند افزودن یک سایه به یک عنصر. در مثال 3، مجموعه ای از دایره ها ساخته شده است که یکی از آنها با یک کادر سایه برجسته شده است. از این مجموعه می توان برای پیمایش صفحات یا عکس ها استفاده کرد.

مثال 3. درخشش

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

برنج. 3. در اطراف دایره بدرخشید

با کمک شعاع مرزی، می توانید نه تنها یک دایره، بلکه یک بیضی و همچنین یک بلوک گرد بیضی بسازید. برای انجام این کار، باید نه یک مقدار، بلکه دو مقدار را از طریق اسلش بنویسید. نوشتن 20px / 10px به این معنی است که شعاع افقی دور 20 پیکسل و شعاع عمودی 10 پیکسل خواهد بود. مثال 4 نحوه ایجاد گوشه های بیضوی برای افزودن متن به سبک کمیک به عکس را نشان می دهد.

مثال 4. بیضی

HTML5 CSS3 IE 9+ Cr Op Sa Fx

تو معلم خودت هستی

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

برنج. 4. استفاده از گوشه های بیضوی

همانطور که در مثال 5 نشان داده شده است، می توانید با افزودن یک ویژگی حاشیه-radius به انتخابگر img، ظاهر گوشه ها را روی تصاویر تغییر دهید.

مثال 5. تصاویر

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

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

گوشه های گرد در CSS 3 بدون تصاویر

این مثال از ویژگی‌های CSS 3 برای گرد کردن گوشه‌ها بدون نیاز به تصاویر استفاده می‌کند.

مثال HTML و CSS: گرد کردن گوشه ها با CSS 3 بدون تصاویر

مسدود کردن محتوا

شرح مثال

1. برای گرد کردن گوشه ها، از ویژگی CSS 3 استفاده می کنیم که همه مرورگرهای مدرن آن را درک می کنند.
2. برای مرورگرهای قدیمی‌تر فایرفاکس، کروم و سافاری، ویژگی‌های خاصی را با پیشوندهای -moz- و -webkit- اعمال می‌کنیم که قبل از پشتیبانی از ویژگی اصلی داشتند. متأسفانه، هیچ آنالوگ مشابهی برای Opera و IE قدیمی وجود ندارد. توجه داشته باشید که هنگام ایجاد فیله های پیچیده، ویژگی های پیشوندی ممکن است به درستی کار نکنند. به همین دلیل است که در کد CSS آنها بالاتر از ویژگی اصلی مشخص شده اند، به طوری که با توجه به اولویت های سبک، مرورگرهایی که قبلاً "پاک" را می فهمیدند از آن استفاده کرده اند.

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

گوشه های گرد در CSS بدون تصویر

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

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

مثال HTML و CSS: گرد کردن گوشه ها بدون استفاده از تصاویر

مسدود کردن محتوا

شرح مثال

1. در داخل بلوک با class = "block" یک عنصر برای محتوای اصلی ("content_block") مشخص می کنیم که قبل از آن بلوک هایی برای شبیه سازی گرد کردن گوشه ها قرار می دهیم ("b1"، "b2"، "b3"). بعد از آن ما آنها را به همان ترتیب، اما به ترتیب معکوس قرار می دهیم.
2. به بلوک ها بدهید تا ارتفاع مورد نیاز و حاشیه های جانبی (CSS) را شبیه سازی کنند تا ظاهر گوشه ها ایجاد شود. همچنین اندازه فونت آنها (CSS) را بازنشانی می کنیم و تنظیم می کنیم: hidden - این برای مرورگرهای قدیمی در نظر گرفته شده است که می توانند ارتفاع را افزایش دهند و آن را بزرگتر از مقدار مشخص شده کنند.
3. در این مثال، علاوه بر گرد کردن گوشه ها، تقلیدی از یک قاب نیز اضافه شده است، اگر به آن نیاز ندارید، به سادگی تمام "حاشیه ها" را از عناصر حذف کنید و رنگ پس زمینه را از بلوک "b3" حذف کنید.

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

مثال HTML و CSS: گرد کردن گوشه ها با استفاده از یک تصویر واحد

منو

شرح مثال

1. با استفاده از ویژگی CSS، یک تصویر پس زمینه برای بلوک تنظیم کنید، که ضرب عمودی و افقی آن ممنوع است (بدون تکرار)، زیرا در این مورد نیازی به آن نیست.
2. برای جلوگیری از چسبیدن متن داخل بلوک به لبه‌های آن، لایه داخلی آن (CSS) را روی 5 پیکسل در هر طرف تنظیم کنید.
3. بعد، باید بلوک را به همان ابعاد پس زمینه تنظیم کنید. تصویر پس زمینه ما دارای ابعاد 140x32 پیکسل است، اما عرض (CSS) و ارتفاع (CSS) را برای خود بلوک مشخص می کنیم که 10 پیکسل کاهش می یابد. من مجبور شدم آن را کاهش دهم به دلیل وجود لایه داخلی بسیار زیاد، که همچنین عنصر را در هر جهت 5 پیکسل گسترش می دهد.

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

این تکنیک اغلب برای گرد کردن موارد تک خطی مانند پیوندها یا عناوین بخش / منو استفاده می شود.

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

محتوای اصلی.

شرح مثال

1. در داخل بلوک کلاس = "block" دو عنصر - "left_bok" و "right_bok" را قرار می دهیم، که آنها را به عنوان تصاویر پس زمینه (CSS) قسمت های جانبی تنظیم می کنیم و تولید مثل آنها را ممنوع می کنیم (بدون تکرار). برای بلوک اصلی، پس‌زمینه را از قسمت مرکزی تنظیم می‌کنیم و اجازه می‌دهیم فقط به صورت افقی کپی شود (تکرار-x).
2. عرض بلوک های جانبی مربوط به اندازه پس زمینه را مشخص کنید، برای ما 14x32 پیکسل است. اما برای بلوک اصلی، مانند مثال قبلی، ارتفاع را روی 22px قرار دهید تا لایه عمودی را جبران کنید.
3. ما طرفین خود را نسبت به "بلوک" قرار می دهیم، بنابراین برای آن مشخص می کنیم: نسبی، و برای خود طرف ها - مطلق. خوب، سپس آنها را با استفاده از ویژگی های CSS به طرف های مربوط به والد فشار می دهیم، و.
4. برای جلوگیری از پنهان شدن محتوای بلوک در زیر تصاویر جانبی، لایه جانبی "block" (CSS) را تنظیم کنید، که می تواند برابر یا کمی بزرگتر از خود کناره ها باشد. همچنین حاشیه‌های کوچکی را در بالا و پایین قرار می‌دهیم تا متن به لبه‌ها «نچسبد».

IE6 با این روش یک اشکال کوچک دارد:

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

بیایید آن را متفاوت انجام دهیم. بیایید "right_bok" حاشیه سمت چپ (CSS) را روی 100٪ تنظیم کنیم تا به پشت مرز سمت راست کادر اصلی منتقل شود و سپس آن را برگردانیم و با تعداد پیکسل های برابر با آن به سمت چپ منتقل کنیم. عرض IE6 با مقادیر این ویژگی ها به درستی کار می کند، بنابراین چاره ای جز قرار دادن بلوک در جایی که به آن نیاز داریم ندارد.

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

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

محتوای اصلی.

شرح مثال

1. با استفاده از شبه عناصر CSS و نشان می دهد که می خواهیم چیزی به ابتدا و انتهای بلوک اصلی اضافه کنیم. و با استفاده از ویژگی CSS، فقط تصاویر لازم از گوشه های گرد یا بهتر بگوییم کناره ها را اضافه می کنیم. به این ترتیب دو عنصر شبه تصویر ایجاد کردیم.
2. خوب، پس ما همه چیز را دقیقاً مانند مثال قبلی انجام می دهیم، فقط با شبه عناصر ایجاد شده کار می کنیم.

برای IE6 و IE7، در این مثال از عصا استفاده شده است:

1. همانطور که می دانید، IE6 و IE7 شبه عناصر استفاده شده در اینجا را درک نمی کنند، بنابراین ما موارد زیر را انجام می دهیم. ما از عبارت استفاده می‌کنیم که دو تگ را در عنصر اصلی ادغام می‌کند، و قبلاً آنها را همان سبک‌های مثال قبلی تنظیم کرده‌ایم. توجه داشته باشید که کد تزریق شده بعد از اولین innerHTML بلافاصله بعد از تگ "block" باز و بعد از innerHTML دوم - قبل از تگ بسته شدن اضافه می شود. بله، در مورد ما مهم نیست، زیرا از موقعیت یابی مطلق استفاده می شود، اما گاهی اوقات دانستن در مورد آن مفید است.
2. برای جلوگیری از دیده شدن این کد توسط سایر مرورگرها، آن را در آن قرار می دهیم نظرات مشروط... بهتر است حتی آن را در یک فایل CSS جداگانه قرار دهید که باید با یک برچسب بسته با همان نظرات اضافه شود.

گوشه های گرد در CSS با استفاده از بسته بندی بلوک

ماهیت این روش این است که ابتدا گوشه ها از تصویر بریده می شوند. سپس چند بلوک دیگر (با توجه به تعداد گوشه ها) در داخل بلوک اصلی قرار می گیرد که درون یکدیگر تودرتو می شوند. به هر یک از آنها یک گوشه تصویر به عنوان پس زمینه داده می شود. تکثیر تصاویر ممنوع است و مختصاتی داده می شود تا در گوشه بلوک ها مکان هایی را اشغال کنند. این جلوه گوشه های گرد را می دهد.

مثال HTML و CSS: گرد کردن گوشه ها با استفاده از بسته بندی بلوک

مسدود کردن محتوا

شرح مثال

1. چهار تا دیگر را داخل بلوک اصلی قرار می دهیم. از آنجایی که هیچ یک از این بلوک‌ها حاشیه یا قاب تنظیم نشده‌اند، و فقط درونی‌ترین بلوک دارای حاشیه است، همه آنها از نظر ارتفاع و عرض برابر هستند.
2. با استفاده از ویژگی CSS، یک گوشه برای هر یک از بلوک‌های داخلی به عنوان پس‌زمینه تنظیم کنید، ضرب آن‌ها را غیرفعال کنید و در گوشه‌های بلوک‌ها قرار دهید. و از آنجایی که رنگ پس زمینه عناصر شفاف است، هر چهار گوشه پس زمینه در صفحه قابل مشاهده است.
3. رنگ پس زمینه دلخواه را به بیرونی ترین بلوک گوشه اضافه کنید. همه چیز آماده است.

شما می توانید به صراحت عرض بلوک را با تعیین ویژگی مورد نظر برای class = "block" تنظیم کنید، اما برای تغییر ارتفاع، باید از درونی ترین عنصر استفاده کنید (ما آن را "rb" داریم).

گوشه های گرد در CSS با استفاده از موقعیت یابی

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

مثال HTML و CSS: گرد کردن گوشه ها با استفاده از موقعیت

مسدود کردن محتوا

شرح مثال

1. در داخل عنصر اصلی (class = "block") چهار تگ با کلاس های "corn_lt"، "corn_rt"، "corn_lb"، "corn_rb" قرار می دهیم که به عنوان بلوک های گوشه عمل خواهند کرد.
2. با استفاده از ویژگی CSS، تصویر پس زمینه خود را به هر بلوک گوشه متصل می کنیم و عرض و ارتفاع آن را از نظر اندازه با این تصاویر پس زمینه برابر می کنیم. برای حفظ امنیت، اندازه فونت (CSS) را بازنشانی کنید و مقدار اضافی (CSS) را برش دهید.
3. موقعیت نسبی عنصر اصلی (CSS: نسبی) را مشخص کنید، زیرا بلوک های گوشه را نسبت به آن و برای خود گوشه ها - مطلق (مطلق) قرار می دهیم.
4. با استفاده از ویژگی‌های CSS، و برای بلوک‌های گوشه، فواصل افست عمودی و افقی را مشخص کنید تا در گوشه‌های بلوک اصلی قرار گیرند.

IE6 با این روش چند مشکل دارد:

1. اگر "بلوک" به صراحت عرض را مشخص نکند، گوشه های سمت چپ در جای خود قرار نمی گیرند. این به این دلیل است که بلوک دارای بالشتک است. ساده ترین راه برای رفع مشکل این است که تورفتگی ها را بردارید و محتوای اصلی "بلوک" (بدون گوشه) را در یک بلوک بسته بندی اضافی قرار دهید و تورفتگی های لازم را در لفاف مشخص کنید. اما من در اینجا با فعال کردن layout با ویژگی بزرگنمایی: 1 که به IE6 می‌گوید عنصر را در اندازه طبیعی خود رندر کند، این کار را متفاوت انجام دادم. این ویژگی نامعتبر است، بنابراین، اگر تصمیم به استفاده از آن دارید، توصیه می کنم از طریق آن ارتباط برقرار کنید نظرات مشروط.
2. همان باگ تک پیکسلی که در بالا مورد بحث قرار گرفت. اما در اینجا، شکاف می تواند نه تنها بین گوشه های سمت راست و سمت راست بلوک، بلکه در زیر نیز ایجاد شود. و اگر از شکاف های سمت راست خلاص شویم، این کار با موارد پایین تر کار نخواهد کرد. راه خروج این است که به صراحت عرض و ارتفاع عنصر اصلی را مشخص کنید. مقادیر فرد را نیز می توان تنظیم کرد، اما پس از آن لازم است که فواصل جابجایی را به سمت پایین و به سمت راست برابر با صفر، بلکه برابر با 1-px تنظیم کنید.

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

اسپرایت تصویری است که چندین تصویر را به طور همزمان ترکیب می کند و به عنوان پس زمینه برای عناصر وب سایت استفاده می شود. اینکه کدام قسمت از sprite پس‌زمینه این یا آن عنصر HTML خواهد بود به مختصات مشخص شده در یک ویژگی خاص CSS بستگی دارد.

مثال HTML و CSS: گرد کردن گوشه ها با استفاده از موقعیت یابی و sprites

مسدود کردن محتوا

شرح مثال

1. با استفاده از ویژگی CSS، یک تصویر پس‌زمینه اسپرایت را به بلوک‌های گوشه متصل کنید که شکلی گرد با ابعاد 22x22 پیکسل (11x11 پیکسل برای هر ربع گوشه) دارد.
2. با استفاده از ویژگی CSS، مختصات افست پس زمینه را مشخص می کنیم. به عنوان مثال، مقدار -11px 0 به این معنی است که پس‌زمینه به اندازه 11px در امتداد محور X به چپ منتقل می‌شود، اما در امتداد محور Y جابه‌جا نمی‌شود. بنابراین نیمه چپ اسپرایت از مرز عنصر فراتر می رود و فقط سمت راست باقی می ماند. اما حتی نیمی از آن قابل مشاهده است، زیرا 22 پیکسل ارتفاع دارد و ارتفاع بلوک گوشه تنها 11 پیکسل است. بنابراین معلوم می شود که با این مقدار، ربع سمت راست بالای sprite به پس زمینه عنصر تبدیل می شود.

IE6 همان مشکلات مثال قبلی را دارد.

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

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

و یک لحظه در مثال‌های قبلی، گوشه‌ها به همراه پس‌زمینه داخل بریده شده‌اند، و این همیشه ضروری نیست، به‌خصوص اگر فرض شود که پس‌زمینه بلوکی با گوشه‌های گرد غیر یکنواخت باشد. بنابراین، پس‌زمینه داخل قاب در اینجا شفاف شد (فرمت PNG این اجازه را می‌دهد) و وقتی گوشه‌ها بریده شدند، قسمت داخلی آنها نیز شفاف شد. در صورت لزوم، می توانید از روش مشابه در مثال های قبلی نیز استفاده کنید.

مثال HTML و CSS: گرد کردن گوشه ها با استفاده از شبه عناصر

مسدود کردن محتوا

پس زمینه، و با کمک آن آنها را در سمت راست قرار می دهیم و "تکثیر" را ممنوع می کنیم. همه چیز، گوشه ها آماده است.

از آنجایی که ما حاشیه‌های داخلی (CSS) را برای "block" مشخص کرده‌ایم، شبه عناصر و در نتیجه گوشه‌ها در گوشه‌های بلوک قرار ندارند، بلکه از لبه‌ها با 15 پیکسل فاصله دارند. برای رفع این مشکل، شبه عناصر حاشیه‌های منفی (CSS) را در طرف‌های لازم قرار می‌دهیم تا آنها را در بالای بالشتک قرار دهیم. اما ما حاشیه ها را نه 15، بلکه 17 پیکسل می کنیم، این برای پوشاندن قاب (CSS) لازم است که عرض آن 2 پیکسل است (15 + 2 = 17). حالا تمام.

برای IE6 و IE7، در اینجا از "عصای زیر بغل" آشنا با تزریق HTML استفاده کردیم، زیرا این مرورگرها شبه عناصر استفاده شده در اینجا را درک نمی کنند:

1. با استفاده از بیان، دو تگ را در عنصر اصلی ادغام می‌کند که آن‌ها را نیز به بلوک تبدیل می‌کنیم. سپس یک تگ در آنها قرار می دهیم. و سپس این تگ ها همان ویژگی های شبه عناصر را دارند. تنها چیزی که وجود دارد این است که ویژگی CSS: relative را اضافه می کنیم که بدون آن فریم بر گوشه ها همپوشانی دارد.

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

نمونه دیگری از گرد کردن گوشه ها با عناصر شبه و بدون بلوک های اضافی

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

مثال HTML و CSS: گرد کردن گوشه هایی که می توانید ارتفاع بلوک را تغییر دهید

مسدود کردن محتوا

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

1. چهار تگ را در داخل "بلوک" اضافه کنید و آنها را در موقعیت قرار دهید. و سپس آنها را به عنوان پس زمینه به گوشه های تصویر نشان می دهیم و در گوشه های عنصر اصلی قرار می دهیم. یعنی دقیقاً مانند یکی از روش هایی که در بالا بحث شد عمل می کنیم.
2. برای خلاص شدن از شر باگ یک پیکسل (که در بالا بیش از یک بار ذکر شد)، یک حاشیه چپ 100٪ (CSS) به عناصر گوشه سمت راست و یک افست منفی 9- پیکسل اضافه کنید. به طور کلی، اگر به یاد داشته باشید، این افست باید برابر با عرض بلوک گوشه باشد (ما آن را 11 پیکسل داریم)، ​​اما مرز 2 پیکسلی را که در اینجا داریم فراموش نکنید - باید گوشه ها را در بالای آن قرار دهیم (11 پیکسل). -2px = 9px).

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

در فایرفاکس، این روش از نسخه 3.6 به درستی کار می کند، و در Opera - از نسخه 10.0، من عصا را برای آنها نیافتم، زیرا ارتباط کمی دارد.