نحوه گرد کردن گوشه ها در CSS و HTML. گرد کردن گوشه های تصاویر گوشه های گرد با استفاده از CSS

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

در نتیجه خروجی موارد زیر را دریافت می کنیم مستطیل با قاب.

نحوه ایجاد گوشه های گرد در CSS

این ویژگی برای گرد کردن گوشه ها استفاده می شود شعاع مرزی.

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

تگ div HTML به ما می دهد مستطیل در یک قاب با یک گردو گوشه ها:

و تگ HTML برای نمایش متن به شکل زیر خواهد بود:

ما گرفتیم مستطیل گردو متن:

اگر ویژگی های توصیف اندازه مستطیل را از کد حذف کنید عرضو ارتفاع، سپس می توانید اشکال زیر را با گوشه های گرد بدست آورید:

1. بدون متن

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

گوشه های انتخاب شده را گرد کنید

در توضیحات سبک، پارامتر 10px در ویژگی شعاع مرزیشعاع انحنا را نشان می دهد که با انتخاب مورد نیاز می توان آن را تغییر داد. اگر روی 0 تنظیم شود، گرد کردن رخ نخواهد داد. این ویژگی را می توان در مواقعی استفاده کرد که نیاز به گرد کردن گوشه های انتخاب شده دارید.

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

1. گوشه سمت چپ بالا.

2. گوشه سمت راست بالا.

3. گوشه پایین سمت راست.

4. گوشه سمت چپ پایین.

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

زاویه ها در جهت عقربه های ساعت شمارش می شوند و از گوشه سمت چپ بالا شروع می شوند:

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

روش دوم به دست آوردن یک مستطیل با گوشه های گرد را در نظر بگیرید با استفاده از HTMLکد بدون نوشتن در یک فایل سبک.

گوشه های گرد HTML

یک ویژگی کوچک وجود دارد که کل فرآیند را حتی بیشتر ساده می کند - این گوشه های گرد HTML. این شامل تولید کد HTML است که شامل همان سبک‌های موجود است کدهای CSS. این ویژگی از همان ویژگی‌های بلوک CSS استفاده می‌کند و نیازی به نوشتن بلوک در فایل Style.css را از بین می‌برد. در یک کلام، کد CSS را به طور کامل با کد HTML جایگزین می کنیم.

به جای بلوک CSS، یک اسکریپت HTML دریافت می کنیم که در جایی که مستطیل با گوشه های گرد باید ظاهر شود، وارد می کنیم:

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

3. تصاویر با گوشه های گرد. فریم در اطراف تصویر HTML

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

این کار بسیار ساده انجام می شود و اکنون نحوه انجام آن را یاد خواهیم گرفت.

بیایید تصویر را در سایت قرار دهیم و پس‌زمینه آن را به عنوان پس‌زمینه تگ div بسازیم. کد و تصویر زیر را دریافت می کنیم:

گرد کردن گوشه های تصویر با افزودن یک قاب

گرد کردن گوشه های تصاویر در CSS و HTML و افزودن حاشیه می تواند به یکی از دو روشی که در بالا توضیح داده شد انجام شود.

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

لطفاً توجه داشته باشید که برخی از ویژگی‌ها را می‌توان در فایل سبک و برخی را در تگ div وارد کرد. در مورد ما، ابعاد تصویر عرض و ارتفاع در کد HTML درج شده است.

کد HTML روش دوم، بدون استفاده از فایل سبک توضیح داده شده در این مقاله، به صورت زیر است:

در نتیجه کدهای هر یک از دو روش، همان نتیجه را می گیریم - تصویری با گوشه های گرد:

مدتهاست که همه از گوشه های مستطیلی سنتی در طراحی وب سایت خسته شده اند. گوشه های گرد مد هستند، که نه با استفاده از تصاویر، بلکه از طریق استایل ها ساخته می شوند، که برای آنها از ویژگی حاشیه-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.

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

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

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

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

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

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

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

مثال 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 نشان داده شده است، می توانید با افزودن ویژگی border-radius به انتخابگر img، ظاهر گوشه ها را در تصاویر تغییر دهید.

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

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

گوشه های گرد و قاب عکس

1. گرد کردن گوشه ها با شعاع حاشیه

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

IE: 9.0
فایرفاکس: 4.0
کروم: 4.0
سافاری: 5.0، 3.1 -webkit-
اپرا: 10.5
سافاری iOS: 7.1
اپرا مینی: —
مرورگر اندروید: 4.1
کروم برای اندروید: 44

این ویژگی به شما اجازه می دهد تا گوشه های حروف کوچک و عناصر بلوک. منحنی برای هر زاویه با استفاده از یک یا دو شعاع که شکل آن را تعریف می کند - تعریف می شود دایرهیا بیضی. شعاع برای کل پس‌زمینه اعمال می‌شود، حتی اگر عنصر هیچ حاشیه‌ای نداشته باشد، موقعیت دقیق سکنت با استفاده از ویژگی background-clip تعیین می‌شود.

ویژگی border-radius به شما امکان می دهد همه گوشه ها را یکجا گرد کنید و با استفاده از ویژگی های border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius می تواند هر گوشه را جداگانه گرد کند.

اگر دو مقدار برای ویژگی border-radius تنظیم کنید، اولین مقدار آن را گرد می کند بالا سمت چپو گوشه سمت راست پایین، و دوم - بالا سمت راستو پایین سمت چپ.

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

گزینه ها

Div (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ حاشیه: 5 پیکسل جامد؛).r1 (شعاع حاشیه: 0 0 20 پیکسل 20 پیکسل؛).r2 (شعاع حاشیه: 0 10 پیکسل 20 پیکسل؛). r3 (شعاع حاشیه: 10 پیکسل x ؛ ؛) .r4 (مرزهای مرزی: 10px/20px ؛) .r5 (Border-radius: 5px 10px 15px 30px/30px 15px 10px 5px ؛). r6 (رادوس مرزی: 10px 20px 30px 40px/30px ؛) .r7 ( حاشیه-شعاع: 50٪؛).r8 (حاشیه-بالا: هیچ؛ حاشیه-پایین: هیچ؛ مرز-شعاع: 30px/90px;).r9 (شعاع حاشیه-پایین-چپ: 100px;).r10 ( حاشیه -شعاع: 0 100٪؛).r11 (شعاع حاشیه: 0 50٪ 50٪ 50٪؛).r12 (شعاع حاشیه بالا-چپ: 100٪ 20 پیکسل؛ شعاع حاشیه-پایین-راست: 100٪ 20 پیکسل ;)
برنج. 1. نمونه هایی از گزینه های مختلف برای گرد کردن گوشه های بلوک

2. تصویر مرزی

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

IE: 11.0
فایرفاکس: 15.0، 3.5 -moz-
کروم: 16.0، 7.0 -webkit-
سافاری: 6.0، 3.0 -webkit-
اپرا: 15.0، 11.0 -o-
سافاری iOS: 7.1
اپرا مینی: 8-o-
مرورگر اندروید: 4.4، 4.1 -webkit-
کروم برای اندروید: 42

ویژگی به شما امکان می دهد یک تصویر را به عنوان قاب عنصر تنظیم کنید. شرط اصلی برای تصویر این است که باید متقارن باشد. ملک شامل مقادیر زیر: (حاشیه-تصویر: عرض منبع برش تکرار از ابتدا؛) .

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

/* مثال 1 */ div ( عرض: 260 پیکسل؛ ارتفاع: 100 پیکسل؛ سبک حاشیه: جامد؛ حاشیه-تصویر-عرض: 15 پیکسل؛ حاشیه-تصویر-منبع: url(border_round.png)؛ حاشیه-تصویر-برش: 30 ؛ حاشیه-تصویر-تکرار: کشش؛ ) /* مثال 2 */ div ( عرض: 260 پیکسل؛ ارتفاع: 100 پیکسل؛ سبک حاشیه: جامد؛ حاشیه-تصویر-عرض: 15 پیکسل؛ حاشیه-تصویر-منبع: url(border_round. png)؛ حاشیه-تصویر-برش: 30؛ حاشیه-تصویر-تکرار: گرد؛ )
برنج. 2. نمونه ای از طراحی مرزهای بلوک با استفاده از تصویر

برش های A - B - C - D گوشه های قاب را تشکیل می دهند و قسمتی از طرح که بین آنها قرار دارد فضای باقی مانده قاب را مطابق با آن پر می کند. ارزش داده شدهویژگی های حاشیه-تصویر-تکرار اندازه گوشه (اینچ در این مثالاین عدد 30 است) با استفاده از مقدار ویژگی border-image-slice مشخص می شود.

2.1. حاشیه-تصویر-عرض

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

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

نحو

Div (حاشیه-تصویر-عرض: 30 پیکسل؛) شکل. 3. نمونه ای از تنظیم عرض یک قاب تصویر با استفاده از انواع مختلفارزش های

2.2. منبع تصویر مرزی

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

نحو

Div (border-image-source: url(border.png);)

2.3. عناصر حاشیه-تصویر-برش

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

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

نحو

Div (برش حاشیه-تصویر: 50 20;)
برنج. 4. نمونه ای از تعیین برش های قاب تصویر

2.4. حاشیه-تصویر-تکرار

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

نحو

Div (حاشیه-تصویر-تکرار: تکرار؛) شکل. 5. مثالی از تکرار قسمت مرکزی یک قاب تصویر با استفاده از انواع مختلف مقادیر

2.5. مرز-تصویر-آغاز

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

نحو

Div (حاشیه-تصویر-شروع: 10 پیکسل؛)
برنج. 6. نمونه ای از تغییر قاب تصویر با استفاده از انواع مختلف مقادیر

3. فریم بیرونی افست طرح-آفست

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

/*شکل 1:*/ img ( حاشیه: 1px صورتی یکدست؛ طرح کلی: 1px خاکستری خط چین؛ طرح کلی: 3px؛ ) /*شکل 2:*/ img (عرض حاشیه: 1px 10px؛ سبک حاشیه: توپر. رنگ حاشیه: صورتی؛ طرح کلی: 1 پیکسل خاکستری خط چین؛ طرح کلی: 3 پیکسل؛ ) /*شکل 3:*/ img ( حاشیه: 3 پیکسل صورتی داخلی؛ طرح کلی: 1 پیکسل خاکستری خط چین؛ طرح کلی: 1 پیکسل؛ )
برنج. 7. نمونه ای از تزئین تصویر با قاب بیرونی

4. فریم گرادیان

ارزش تصویر حاشیه می تواند نه تنها یک تصویر، بلکه همچنین باشد پر شیب.

قاب شفاف

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

* (اندازه جعبه: حاشیه-جعبه؛). wrap (ارتفاع: 200 پیکسل؛ بالشتک: 25 پیکسل؛ پس‌زمینه: #00E4F6؛ ) .gradient (ارتفاع: 150 پیکسل؛ عرض: 50%؛ حاشیه: 0 خودکار؛ حاشیه: 10 پیکسل شفاف جامد ؛ حاشیه-تصویر: گرادیان خطی (به راست، شفاف 0%, #ADF2F7 100%)؛ حاشیه-تصویر-برش: 1؛ )

پاکت پستی

* (اندازه جعبه: حاشیه-جعبه؛). wrap (ارتفاع: 200px؛ بالشتک: 25px؛ ) .gradient (ارتفاع: 150px؛ عرض: 50%؛ حاشیه: 0 خودکار؛ حاشیه: 10px شفاف شفاف؛ حاشیه-تصویر: 10 گرادیان خطی تکرارشونده (45 درجه، #A7CECC، #A7CECC 10 پیکسل، شفاف 10 پیکسل، شفاف 20 پیکسل، #F8463F 20 پیکسل، #F8463F 30 پیکسل، 30 پیکسل شفاف، 40 پیکسل شفاف؛ )

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

چیزی که من در مورد فتوشاپ دوست دارم این است که در بسیاری از موارد یک کار را می توان به روش های مختلفی انجام داد. پس اینجاست. بیایید با فتوشاپ خود شروع کنیم.

صاف کردن با استفاده از مرزها

این روش مشابه روش قبلی است، اما هنوز بسیار متفاوت است. ما همه چیز را با همان تصویر انجام خواهیم داد.

با ایجاد یک شکل

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

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

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

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

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

با احترام، دیمیتری کوستین

همه مرورگرهای مدرناستانداردهای پشتیبانی نشانه گذاری فرامتنسبک HTML5 و CCS3. و اگر سایت شما (قالب) از استانداردهای مدرن پشتیبانی می کند، می توانید بدون استفاده از ویرایشگرهای گرافیکی، تغییراتی در طراحی مانند گرد کردن گوشه ها، سایه ها، پرهای گرادیان ایجاد کنید.

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

برای اینکه مثال های ارائه شده در مقاله به درستی روی صفحه نمایش شما نمایش داده شود، باید بیشترین استفاده را داشته باشید آخرین نسخه هامرورگرها، فایرفاکس، کروم و آنهایی که بر اساس آنها ساخته شده اند: Yandex.Browser، Amigo و غیره.

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

با توجه به استاندارد CSS3، به طوری که بلوک DIVگوشه های گرد داشت، باید مدل دهی شود شعاع مرزی، برای مثال مانند این:

شعاع حاشیه: 10 پیکسل.

برای وضوح، بیایید دو بلوک با گوشه های صاف و گرد ترسیم کنیم:

بلوک با زوایای راست

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

گرد کردن گوشه های تصاویر

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

این تصویر بدون پردازش CSS است

و حالا با گوشه های گرد:

شعاع حاشیه: 10 پیکسل.

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

شعاع حاشیه: 10 پیکسل. حاشیه: 5px #ccc solid;

و سپس سایه ها:

شعاع حاشیه: 10 پیکسل. حاشیه: 5px #ccc solid; box-shadow: 0 0 10px #444;

گزینه زیر (گوشه های گرد با سایه بدون حاشیه) بسیار شبیه به پد ماوس است:

شعاع حاشیه: 10 پیکسل. box-shadow: 0 0 10px #444;

و در نهایت، تمسخر کامل تصویر

شعاع مرزی: 50%; حاشیه: 5px #cfc solid; box-shadow: 0 0 10px #444;

اگر تصویر را در یک پنجره جدید باز کنید، می بینید که آن (تصویر) بدون تغییر است و تمام گوشه ها، سایه ها و ... فقط نتیجه پردازش است. CSSسبک ها توسط مرورگر شما

یک انحراف غزلی کوچک

سبک مرزاندازه تصویر را با مقدار حاشیه افزایش می دهد. اگر مقداری مشخص شده باشد حاشیه: 5 پیکسل، سپس تصویر نهایی 10 پیکسل گسترده تر و بلندتر می شود. این را در نظر داشته باشید، در برخی موارد ممکن است طرح بندی سایت کار نکند.

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

نحوه گرد کردن گوشه های تصاویر در وردپرس

در تمام مثال‌های بالا، سبک‌ها را مستقیماً در آن نوشتم تگ های htmlکد به عنوان مثال، آخرین مورد به این شکل است:

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

به عنوان مثال، برای تمام تصاویری که تراز برای آنها مشخص نشده است، در فایل style.cssمال شما قالب های وردپرسموارد زیر را بنویسید:

Alignnone (شعاع حاشیه: 10 پیکسل؛ حاشیه: 5 پیکسل #cfc جامد؛ جعبه-سایه: 0 0 10 پیکسل #444؛ )

یا سخت ترین روش برای همه تصاویر موجود در سایت. بیایید استایل را برای همه تگ ها دوباره تعریف کنیم IMG:

Img (شعاع حاشیه: 10 پیکسل؛ حاشیه: 5 پیکسل #cfc جامد؛ کادر-سایه: 0 0 10 پیکسل #444؛ )

آخرین گزینه نه تنها برای وردپرس، بلکه برای هر CMS مناسب است. و حتی برای ساده HTMLصفحات در صورتی که هنگام نمایش تصاویر، برچسب IMGهیچ کلاس سبکی اختصاص داده نمی شود. اما مراقب باشید. اگر گزینه های نمایش برچسب را لغو کنید IMGشما تغییر خواهید کرد ظاهرتمام تصاویر در سایت!

به جای نتیجه گیری

تمام مثال‌های موجود در مقاله مشروط هستند و فقط برای نشان دادن برخی از قابلیت‌های CSS برای پردازش تصویر و نشان دادن چقدر ساده است.