من مطمئن هستم که شما قبلاً با ویژگی مرزی css آشنا هستید. آیا چیز جدیدی که قبلاً در مورد مرز css نمی دانستید، یاد خواهید گرفت؟ خوب، نه تنها یاد خواهید گرفت، بلکه چندین چیز جدید را نیز خواهید دید که قبلاً هرگز نمی دانستید!
نه تنها می توان از CSS3 برای ایجاد گوشه های گرد استفاده کرد، بلکه می توان از کدهای CSS خالص نیز برای ایجاد استفاده کرد اشکال پیچیده. قبلاً می‌توانستید از تصویر پس‌زمینه برای ایجاد ظاهر گوشه‌های گرد استفاده کنید. به لطف تکنیک های جدید برای استفاده از مرز، می توانیم این کار را با کد CSS خالص انجام دهیم.
اصول استفاده از مرز css
احتمالاً قبلاً با آن آشنا هستید استفاده استانداردویژگی های حاشیه:
حاشیه: 1 پیکسل سیاه و سفید.
کد بالا یک حاشیه 1 پیکسلی را خروجی می دهد که سیاه است. به سادگی و به راحتی. همچنین می توانید نحو را کمی گسترش دهید:
عرض حاشیه: ضخیم. حاشیه به سبک: جامد; رنگ حاشیه: سیاه؛
به عنوان یک افزونه، می توانید از مقادیر خاصی استفاده کنید خواص مرزی-عرض، سه کلید واژه هاالف: نازک، متوسط، ضخیم.
اما استفاده از نحو توسعه یافته همیشه عملی نیست. بیایید به مثالی نگاه کنیم زمانی که باید رنگ قاب بلوک را هنگام نگه داشتن ماوس تغییر دهید. در این مورد، استفاده از سینتکس کوتاه بسیار ساده تر است:
جعبه (حاشیه: 1px قرمز ثابت؛ ) .box:hover (حاشیه: 1px سبز ثابت؛ )
یک راه زیباتر و ساده تر برای انجام این کار این است:
جعبه (حاشیه: 1 پیکسل قرمز ثابت؛ ) .box: شناور (رنگ حاشیه: سبز؛ )
همانطور که می بینید، تکنیک پیشرفته زمانی مفید است که فقط برخی از ویژگی ها را تغییر دهیم: عرض، سبک، رنگ و موارد دیگر.
مرز-شعاع
مرز-شعاع- این ویژگی "طلایی" CSS3 است - اولین و رایج ترین ویژگی که کاربردی و مفید شده است. به جز IE8 و نسخه های زیر، همه مرورگرها گوشه های گرد را با استفاده از این نمایش می دهند.
اگرچه برای درست بودن استایل باید از پیشوندهای مخصوص Webkit و Mozilla استفاده کرد.
Webkit-border-radius: 10px; -moz-border-radius: 10px. شعاع مرزی: 10 پیکسل.
امروزه می‌توانیم پیشوندهای خاص را حذف کرده و از فرم استاندارد حاشیه-شعاع استفاده کنیم.
مزیت دیگر این است که می توانیم از مقادیر ویژه برای هر طرف بلوک استفاده کنیم:
شعاع حاشیه بالا-چپ: 20 پیکسل. حاشیه-بالا-راست-شعاع: 0; حاشیه-پایین-راست-شعاع: 30 پیکسل. شعاع حاشیه-پایین-چپ: 0;
در کد بالا، با تنظیم حاشیه-بالا-راست-شعاع و حاشیه-پایین-چپ-شعاع به "تهی" می توان به اشکال شگفت انگیزی دست یافت. اگرچه این عنصر ممکن است برخی از ویژگی‌ها را به ارث ببرد که باید بازنشانی شوند.
مشابه حاشیه و padding، می‌توانیم سینتکس را فشرده کنیم:
/* بالا سمت چپ، بالا سمت راست، پایین سمت راست، پایین سمت چپ */ حاشیه-شعاع: 20px 0 30px 0;
به عنوان نمونه ای از استفاده از ویژگی border-radius، من یک "لیمو" را به شما نشان می دهم که طراحان اغلب هنگام طراحی وب سایت از آن استفاده می کنند:
لیمو (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ پس‌زمینه: #F5F240؛ حاشیه: 1 پیکسل جامد #F0D900؛ شعاع حاشیه: 10 پیکسل 150 پیکسل 30 پیکسل 150 پیکسل؛ )
از اصول اولیه فراتر برویم
بسیاری از طراحان تمام دانش در این زمینه را دارند ویژگی های cssمرز، جایی که به پایان می رسد. اما چند مورد دیگر نیز وجود دارد چیزهای جالب، که با آن می توانید چیزهای شگفت انگیزی خلق کنید!
ساختارهای مرزی پیچیده css
تکنیک های زیادی برای ایجاد طرح ها با استفاده از ساختارهای مرزی پیچیده وجود دارد. به عنوان مثال به موارد زیر نگاه می کنیم ...
سبک مرزی
ما همیشه از معروف ترین خواص جامد، خط چین و نقطه استفاده می کنیم. اما چند ویژگی دیگر به سبک حاشیه وجود دارد: شیار و برآمدگی.
حاشیه: 20px groove #e3e3e3;
یا در نحو توسعه یافته:
رنگ حاشیه: #e3e3e3; عرض حاشیه: 20 پیکسل؛ حاشیه به سبک: شیار;
اگرچه این ویژگی ها مفید هستند، اما مبنایی برای ایجاد قاب های پیچیده نیستند.
طرح کلی
محبوب ترین تکنیک برای ایجاد یک حاشیه دوگانه استفاده از ویژگی outline است.
کادر (حاشیه: 5px جامد #292929؛ طرح کلی: 5px جامد #e3e3e3؛ )
این روش عالی عمل می کند، اگرچه ما را تنها به دو فریم محدود می کند. گاهی اوقات شما نیاز به ایجاد یک مرز گرادیانی دارید که از چندین لایه تشکیل شده است ... پس چگونه؟
شبه عناصر
وقتی تکنیک طرح کلی کافی نیست، وسیله جایگزیناستفاده از شبه عناصر:before و:after است. با استفاده از آن می توانید فریم های اضافی را به یک عنصر اضافه کنید:
کادر (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ پس‌زمینه: #e3e3e3؛ موقعیت: نسبی؛ حاشیه: 10 پیکسل سبز ثابت؛ ) /* دو کادر ایجاد کنید باهمان عرض ظرف */ .box:after، .box:before ( محتوا: ""؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ سمت راست: 0؛ .box:after ( حاشیه: 5px قرمز یکدست؛ طرح کلی: 5px یکدست زرد؛ ) .box:pre (حاشیه: 10px آبی ثابت؛ )
خیلی ظریف به نظر نمی رسد، اما حداقل، کار می کند. فهمیدن توالی رنگ ها در قاب ها کمی سخت است... اما می توانید آن را تشخیص دهید.
جعبه-سایه
یک "روش کودکانه" جالب برای ایجاد یک افکت مشابه، استفاده از ویژگی box-shadow CSS3 است:
کادر (حاشیه: 5px قرمز ثابت؛ کادر-سایه: 0 0 0 5px سبز، 0 0 0 10px زرد، 0 0 0 15px نارنجی؛ )
در این مورد، ما باهوش تر بودیم و از یک ویژگی جعبه سایه اختصاصی استفاده کردیم. با تغییر پارامترهای x, y, blur به صفر می توانیم از رنگ های مختلف برای ایجاد فریم های متعدد استفاده کنیم.
اما یک مشکل وجود دارد: در مرورگرهای قدیمی که خاصیت box-shadow را درک نمی کنند، فقط یک فریم قرمز 5 پیکسلی قابل مشاهده است.
"یاد آوردن! طراحی سایت باید به صورت متقابل مرورگر به نظر برسد، یعنی در همه مرورگرها یکسان باشد. از جمله نسخه های قدیمی تر."
تغییر زاویه
علاوه بر مورد استفاده شده معنی سادهمرز-شعاع، می توانیم دو مورد جداگانه را مشخص کنیم - آنها را از طریق جدا می کنیم / شعاع افقی و عمودی را نشان می دهیم.
مثلا:
شعاع حاشیه: 50 پیکسل / 100 پیکسل؛ /* شعاع افقی، شعاع عمودی */
... این معادل است با:
شعاع حاشیه بالا-چپ: 50 پیکسل 100 پیکسل. حاشیه-بالا-راست-شعاع: 50px 100px; حاشیه-پایین-راست-شعاع: 50px 100px; شعاع حاشیه-پایین-چپ: 50px 100px;
این تکنیک برای ایجاد اشکال منحصر به فرد بلوک مناسب است. به عنوان مثال، در اینجا نحوه ایجاد یک افکت کاغذ پیچیده شده است:
کادر (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ پس‌زمینه: # 666؛ شعاع حاشیه بالا-چپ: 15 میلی متر؛ شعاع حاشیه-پایین-راست: 15 میلی متر؛ 15 میلی متر؛ )
فرم های CSS با استفاده از مرز
این تکنیک نشان می دهد که چگونه می توانید فرم های CSS را ایجاد کنید، در حالی که از عناصری با ابعاد ارتفاع و عرض صفر استفاده می کنید. غافلگیر شدن؟ بیایید به یک مثال نگاه کنیم ...
برای چند مثال بعدی، از نشانه گذاری زیر استفاده خواهیم کرد:
... و سبک اصلی زیر:
جعبه (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ پس‌زمینه: مشکی؛ )
رایج ترین مثال با استفاده از CSSاشکال - ایجاد یک فلش روان. راز این پیکان در ایجاد مرز با رنگهای متفاوتبرای هر یک از طرفین سپس قرار دادیم صفات عرضو ارتفاع تا 0.
بیایید کلاس arrow را به بلوک div اختصاص دهیم:
پیکان (عرض: 0؛ ارتفاع: 0؛ حاشیه بالا: 100 پیکسل قرمز یکدست؛ حاشیه سمت راست: 100 پیکسل سبز یکدست؛ حاشیه پایین: 100 پیکسل آبی یکدست؛ حاشیه سمت چپ: 100 پیکسل زرد پررنگ؛ )
برای نشان دادن، ابتدا از نحو توسعه یافته استفاده می کنیم. بعد می توانیم حذف کنیم کد اضافیبا استفاده از نحو کوتاه شده:
پیکان (عرض: 0؛ ارتفاع: 0؛ حاشیه: 100 پیکسل ثابت؛ رنگ حاشیه: قرمز سبز آبی زرد؛ )
جالبه، نه؟ حالا رنگ های شفاف را از همه طرف به جز سمت آبی تنظیم می کنیم.
پیکان (عرض: 0؛ ارتفاع: 0؛ حاشیه: 100 پیکسل ثابت؛ حاشیه-پایین-رنگ: آبی؛)
عالی شد! اما این در تضاد است طرح معنایی، یک div .arrow ایجاد کنید، فقط برای افزودن یک فلش به صفحه. برای این منظور می توانیم از شبه المان ها استفاده کنیم که اکنون این کار را انجام خواهیم داد.
یک حباب گفتار ایجاد کنید
برای ایجاد حباب گفتار، به یک قطعه کوچک نیاز داریم CSS خالصکد و یک بلوک div.
حباب گفتار (موقعیت: نسبی؛ رنگ پس‌زمینه: #292929؛ عرض: 200 پیکسل؛ ارتفاع: 150 پیکسل؛ ارتفاع خط: 150 پیکسل؛ /* مرکز عمودی */ رنگ: سفید؛ تراز نوشتاری: مرکز؛ )
حباب گفتار: بعد ( محتوا: ""؛ )
در این مرحله، فلشی را که قبلا ساخته بودیم ایجاد می کنیم، آن را به عنصر اضافه می کنیم و تنها چیزی که باقی می ماند قرار دادن آن است:
حباب گفتار: بعد ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 10 پیکسل ثابت؛ رنگ حاشیه: قرمز سبز آبی زرد؛ )
اگر بخواهیم فلش رو به پایین باشد، باید تمام مرزها را به جز قسمت بالایی روی شفاف قرار دهیم.
حباب گفتار: بعد ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 10 پیکسل ثابت؛ حاشیه بالای رنگ: قرمز؛ )
وقتی این را ایجاد می کنیم شکل CSS، نمی توانیم به طور خاص اندازه فلش را نشان دهیم. در عوض، می‌توانیم ویژگی border-width را تنظیم کنیم، که یک اندازه به فلش اختصاص می‌دهد. همچنین موقعیت فلش را در پایین در وسط قرار می دهیم. بر این اساس، برای این کار از مقادیر بالا و چپ استفاده می کنیم.
حباب گفتار: بعد (محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 15 پیکسل ثابت؛ حاشیه بالای رنگ: قرمز؛ بالا: 100%؛ سمت چپ: 50%؛ )
علاوه بر این، ما فقط باید رنگی مشابه بلوک به آن بدهیم. به یاد داشته باشید، هنگام تعیین موقعیت، باید اندازه حاشیه های دیگر را که نامرئی هستند (15 پیکسل) در نظر بگیرید. همچنین بلوک را در گوشه ها گرد می کنیم.
حباب گفتار ( /* … سبک‌های دیگر */ شعاع حاشیه: 10 پیکسل؛ ) .حباب گفتار: بعد ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 15 پیکسل ثابت؛ حاشیه بالا -color: #292929؛ بالا: 100%؛ سمت چپ: 50%؛ حاشیه سمت چپ: -15px؛ /* تنظیم برای عرض حاشیه */ )
بد نیست، نه؟ با استفاده از چندین کلاس CSS و ترفندهای مرزی می توانید چنین چیزی ایجاد کنید.
/* استفاده از حباب های گفتاری: طبق شکل زیر کلاس .speech-bubble و .speech-bubble-DIRECTION را اعمال کنید.
جایزه! مرکزیت عمودی در داخل بلوک
برای یک خط متن، می توانید از ارتفاع خط استفاده کنید. اما اگر شما دو یا خطوط بیشترمتن... بهترین راه حلویژگی display را روی جدول قرار می دهد و تمام متن را در یک پاراگراف قرار می دهد. این چیزی است که در آن به نظر می رسد نشانه گذاری html:
حباب گفتار ( /* سبک های دیگر */ نمایش: جدول؛ ) .حباب گفتار p (نمایش: سلول جدول؛ تراز عمودی: وسط؛ )
ما خودمان را به مثلث ها محدود نمی کنیم. CSS قادر به نمایش اشکال مختلف - حتی قلب و علامت خطر زیستی است.
Biohazard (عرض: 0؛ ارتفاع: 0؛ حاشیه: 60 پیکسل جامد؛ حاشیه-شعاع: 50٪؛ حاشیه-بالا-رنگ: سیاه؛ حاشیه-پایین-رنگ: سیاه؛ حاشیه-چپ-رنگ: زرد؛ حاشیه-راست- رنگ: زرد؛ )
نتیجه
برای کنترل مرز یک عنصر، استفاده کنید دارایی جهانیمرز . این ویژگی به شما امکان می دهد ضخامت، سبک و رنگ حاشیه یک عنصر را در یک اعلان تنظیم کنید.
این سه ویژگی (ضخامت حاشیه، سبک حاشیه و رنگ) را می توان در یک اعلان تنظیم کرد. در اینجا یک مثال است:
شما می توانید یک سبک حاشیه را تنها در یک طرف یک عنصر مشخص کنید. برای این کار از ویژگی های border-top (حاشیه بالا)، border-right (حاشیه سمت راست)، border-bottom (مرز پایین)، border-left (حاشیه چپ) استفاده کنید.
در این مثال، هر طرف بلوک دارای ضخامت، سبک و رنگ متفاوتی است.
به این فکر کنید که چگونه کمک CSSشما می توانید یک شکل مانند این ایجاد کنید:
مقادیر حاشیه - ضخامت، سبک و رنگ - را می توان به طور جداگانه با استفاده از ویژگی های خاص تنظیم کرد.
- سبک حاشیه - سبک حاشیه.
- border-width - عرض حاشیه.
- رنگ حاشیه - رنگ حاشیه.
بیایید هر یک از مقادیر را جداگانه در نظر بگیریم.
دارایی به سبک مرزی سبک حاشیه.
ویژگی border-style سبک حاشیه را تعیین می کند. در CSS، در تفاوت های HTML، مرز یک عنصر نه تنها می تواند جامد باشد. مقادیر زیر برای سبک حاشیه پذیرفته شده است:
- هیچ - بدون حاشیه (پیش فرض).
- جامد - مرز جامد.
- حاشیه دوتایی
- نقطه چین - حاشیه.
- نقطه چین - حاشیه ای که از یک سری نقطه ساخته شده است.
- خط الراس - مرز "رج".
- شیار - مرز "شیار".
- درج شده - حاشیه افسرده.
- ابتدا - مرز اکسترود شده.
نمونه هایی از ظاهر آنها
بدون مرز (هیچ)
مرز جامد
حاشیه دوتایی
حاشیه یک سری نقطه (نقطه دار)
مرز شکسته
حاشیه شیار
حاشیه خط الراس
حاشیه تورفته (در داخل)
حاشیه اکسترود شده (ابتدا)
ضمناً اگر رنگ حاشیه را برای قاب رج روی مشکی قرار دهید این نتیجه را خواهید گرفت.
بلوک div با حاشیه سیاه و سبک خط الراس.
فریم جامد به نظر می رسد، اما به این دلیل است که سبک رج با افزودن یک افکت سایه سیاه ایجاد می شود و افکت سیاه روی یک قاب مشکی قابل مشاهده نیست.
با استفاده از ویژگی border-style، سبک حاشیه را می توان نه تنها برای همه طرف های بلوک تنظیم کرد. تنظیم چندین مقدار برای یک ویژگی به سبک حاشیه امکان پذیر است؛ بسته به تعداد مقادیر، سبک حاشیه به تعداد متفاوتی از طرف های بلوک اختصاص داده می شود. شما می توانید یک، دو، سه یا چهار مقدار را تنظیم کنید. بیایید به مثال هایی برای هر مورد نگاه کنیم.
یک مقدار (جامد) - سبک حاشیه برای همه طرف های بلوک تنظیم شده است.
دو مقدار (دبل جامد) - مقدار اول استایل را برای دو طرف بالا و پایین تنظیم می کند، دومی برای طرف.
سه مقدار (دو نقطه جامد) - مقدار اول برای سمت بالا، دوم برای طرفین، سوم برای پایین.
چهار مقدار (مثل دو نقطه چین) - هر مقدار برای یک طرف در جهت عقربه های ساعت از بالا شروع می شود.
ویژگی عرض مرز. ضخامت حاشیه - ضخامت لبه.
برای تنظیم عرض حاشیه یک عنصر، از ویژگی border-width استفاده کنید. ضخامت حاشیه را می توان در هر واحد اندازه گیری مطلق، به عنوان مثال در پیکسل، مشخص کرد.
مانند ویژگی border-style، ویژگی را نیز می توان روی یک تا چهار مقدار تنظیم کرد. بیایید به مثال هایی برای هر مورد نگاه کنیم.
کد مثال:
همچنین مقادیر کلیدواژه برای ویژگی border-width وجود دارد. در کل سه مورد وجود دارد:
- نازک - حاشیه نازک؛
- ضخامت متوسط - متوسط؛
- حاشیه ضخیم - ضخیم؛
ضخامت حاشیه: نازک.
ضخامت حاشیه: متوسط.
ضخامت حاشیه: ضخیم.
ویژگی رنگ حاشیه. رنگ لبه.
برای کنترل رنگ حاشیه، از ابزار border-color استفاده کنید. رنگ های این ویژگی را می توان با استفاده از هر روشی که در مقاله "Colors in 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-top-color دوباره به قرمز تعریف شد.
- با استفاده از ویژگی border-right-width، ضخامت حاشیه سمت راست روی 10px تنظیم می شود.
- با استفاده از ویژگی border-bottom-style، سبک حاشیه پایین به صورت double تعریف می شود.
- با استفاده از ویژگی border-left-color، رنگ حاشیه سمت چپ روی آبی تنظیم می شود.
ویژگی مرزی شعاع. گرد کردن گوشه های مرزی
ویژگی border-radius برای گرد کردن گوشه‌های مرزهای یک عنصر در نظر گرفته شده است. این ویژگی در CSS3 معرفی شده است و در تمام مرورگرهای مدرن به جز اینترنت اکسپلورر 8 (و نسخه های قدیمی تر) به درستی کار می کند.
مقادیر می توانند هر عددی باشد که در CSS استفاده می شود.
ویژگی Border-radius: 15px.
اگر قاب بلوک مشخص نشده باشد، فیله با پس زمینه رخ می دهد. در اینجا نمونه ای از یک بلوک گرد بدون حاشیه، اما با رنگ پس زمینه آورده شده است:
ویژگی Border-radius: 15px.
ویژگی هایی برای گرد کردن هر گوشه از یک عنصر وجود دارد. این مثال از همه آنها استفاده می کند:
شعاع حاشیه-بالا-چپ: 15 پیکسل. حاشیه-بالا-راست-شعاع: 0; حاشیه-پایین-راست-شعاع: 15 پیکسل. شعاع حاشیه-پایین-چپ: 0;
ویژگی Border-radius: 15px.
اگرچه این کد را می توان در یک اعلان نوشت: 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 پیکسل سفید جامد؛ رنگ حاشیه پایین: قرمز؛
ویژگی CSS border برای ایجاد مرز یک شی، یعنی ضخامت حاشیه، رنگ و سبک آن استفاده می شود. این ویژگی به طور گسترده در HTML استفاده می شود. برای درک بهتر محتوای صفحه می توانید افکت های مختلفی ایجاد کنید. به عنوان مثال، یک نوار کناری، هدر وب سایت، منو و غیره طراحی کنید.
1. نحو مرزی CSS
مرز: حاشیه به سبک حاشیه با رنگ | به ارث می برند;
- حاشیه-عرض - ضخامت حاشیه. می توانید آن را در پیکسل (px) تنظیم کنید یا از مقادیر استاندارد نازک، متوسط، ضخیم استفاده کنید (فقط از نظر عرض در پیکسل متفاوت هستند)
- border-style - سبک حاشیه نمایش داده شده. می تواند مقادیر زیر را بگیرد
- هیچ یا پنهان - مرز را لغو می کند
- نقطه چین - قاب نقطه چین
- خط تیره - قاب ساخته شده از خط تیره
- خط جامد - ساده (بیشتر استفاده می شود)
- دو برابر - قاب دوتایی
- groove - حاشیه 3 بعدی شیاردار
- برآمدگی، درونی، ابتدایی - جلوه‌های قاب سه بعدی مختلف
- ارث بری - مقدار عنصر والد اعمال می شود
- رنگ حاشیه - رنگ حاشیه. می توان با استفاده از یک نام رنگ خاص یا در قالب RGB مشخص کرد (به نام رنگ های html برای سایت مراجعه کنید)
مقادیر موجود در ویژگی مرزی CSS را می توان به هر ترتیبی تنظیم کرد. متداول ترین دنباله استفاده شده "رنگ سبک ضخامت" است.
2. نمونه هایی با حاشیه های مختلف CSS
2.1. مثال. سبک های مختلف طراحی حاشیه به سبک حاشیه
حاشیه به سبک: خط چینحاشیه به سبک: خط چینسبک حاشیه: جامدحاشیه به سبک: دوبلحاشیه به سبک: شیارحاشیه به سبک: خط الراسحاشیه به سبک: درونیحاشیه به سبک: شروعچهار قاب مختلف
به سبک حاشیه: نقطه چین
حاشیه به سبک: خط چین
سبک حاشیه: جامد
حاشیه به سبک: دوبل
حاشیه به سبک: شیار
حاشیه به سبک: خط الراس
حاشیه به سبک: درونی
حاشیه به سبک: شروع
چهار قاب مختلف
2.2. مثال. تغییر رنگ قاب در شناور ماوس
این مثال بسیار ساده اما جالب است. این نشان می دهد که چگونه می توانید از شبه کلاس :hover و مرز CSS برای ایجاد استفاده کنید جلوه های ساده(به عنوان مثال، برای یک منو).
وقتی ماوس خود را روی یک بلوک می‌برید، رنگ قاب تغییر می‌کند
این چیزی است که در صفحه به نظر می رسد:
2.3. مثال. چگونه یک قاب حاشیه شفاف بسازیم
قاب را می توان شفاف ساخت. این اثر نادر است، اما گاهی اوقات می تواند برای طراحان وب بسیار مفید باشد. برای تنظیم شفافیت، باید از تنظیمات رنگ به شکل RGBA (R, G, B, P) استفاده کنید. آخرین پارامترشفافیت تنظیم شده است (عدد واقعی از 0.0 تا 1.0)
این چیزی است که در صفحه به نظر می رسد:
3. ضخامت حاشیه: خاصیت پهنای حاشیه
ضخامت خط را تنظیم می کند. قبلاً آن را پرسیدیم توضیحات یکپارچهمرز.
نحو CSSعرض مرز
عرض مرز: نازک | متوسط | ضخیم | معنی;
- نازک - ضخامت خط نازک
- ضخامت خط متوسط - متوسط
- ضخامت - ضخامت خط ضخیم
در زیر چند نمونه آورده شده است. غیر معمول ترین چیز ضخامت متفاوت حاشیه در هر طرف خواهد بود.
حاشیه-عرض: نازکعرض مرز: متوسطعرض حاشیه: ضخیمضخامت های مختلف در مرزها
این چیزی است که در صفحه به نظر می رسد:
حاشیه-عرض: نازک
عرض مرز: متوسط
عرض حاشیه: ضخیم
ضخامت های مختلف در مرزها
4. نحوه ساخت یک قاب حاشیه فقط در یک لبه (حاشیه)
ویژگی مرزی CSS دارای ویژگی هایی برای تنظیم مرزهای یک طرفه روی یک عنصر است:
- border-top - برای تنظیم حاشیه در بالا (حاشیه بالا)
- border-bottom - برای تنظیم یک حاشیه در پایین (حاشیه پایین)
- border-right - برای تنظیم مرز در سمت راست (حاشیه سمت راست)
- border-left - برای تنظیم مرز در سمت چپ (حاشیه سمت چپ)
این مرزها را می توان ترکیب کرد، یعنی. قاب خود را برای هر جهت بنویسید. نحو دقیقاً مشابه مرز است.
خواص نیز وجود دارد
- border-top-color - تنظیم رنگ حاشیه بالایی
- border-top-style - تنظیم سبک حاشیه بالایی
- border-top-width - تنظیم ضخامت حاشیه بالایی
- و غیره. برای هر جهت
به نظر من، نوشتن همه چیز در یک خط ساده تر از ایجاد متن اضافی در سبک است. مثلا، خواص زیرهمینطور خواهد بود
/* شرح دو سبک یکسان: */
4.1. مثال. قاب زیبا برای برجسته کردن نقل قول ها
مثال قاب نقل قول
این چیزی است که در صفحه به نظر می رسد:
مثال قاب نقل قول
توجه داشته باشید
شما می توانید یک حاشیه جداگانه برای هر طرف تعیین کنید.
5. نحوه افزودن چندین حاشیه به یک عنصر html
گاهی اوقات لازم است چندین حاشیه ایجاد کنید. بیایید یک مثال بزنیم
5.1. گزینه اول با حاشیه های متعدد
این چیزی است که در صفحه به نظر می رسد:
راه دوم از طریق سایه وجود دارد.
5.2. برای ایجاد حاشیه های متعدد، سایه ها را پوشش دهید
این چیزی است که در صفحه به نظر می رسد:
6. گرد کردن گوشه ها در مرزها (شعاع مرزی)
برای ایجاد قاب های زیبااز ویژگی CSS border-radius (فقط در CSS3 موجود است) استفاده کنید. می توان از آن برای ایجاد گوشه های گرد استفاده کرد که ظاهری کاملا متفاوت ایجاد می کند. مثلا
7. CSS Indented Line
خطوط فشرده می توانند چشمگیر به نظر برسند پس زمینه تیره، که برای هر سایتی مناسب نیست.
این چیزی است که در صفحه به نظر می رسد:
برای دسترسی به مرز از جاوا اسکریپت، باید ساختار زیر را بنویسید:
document.getElementById("elementID").style.border="VALUE"
16 ژوئن 2016
درود بر همه. امروز به شما می گویم که چرا هنگام چیدمان وب سایت ها، گاهی اوقات یک حاشیه شفاف در CSS ایجاد می کنند، یعنی یک قاب نامرئی از یک عنصر.
چرا به یک قاب شفاف نیاز دارید؟
هنگام چیدمان یکی دیگر از طرح‌بندی‌ها، وظیفه زیر تنظیم شد: وقتی ماوس را روی یک آیتم منو می‌برید، باید زیرخط داشته باشد. و نه برای متن، بلکه برای کل بلوک با پیوند. برای کسانی که چیدمان را می‌دانند، همه چیز کاملاً ساده و واضح است در این مورد. فقط باید ویژگی border-bottom را در هنگام نگه داشتن ماوس روی پیوند به آن اضافه کنید. اما اگر فقط این کار را انجام دهید، خیلی زیبا و سالم نخواهد بود. حالا من یک مثال به شما نشان می دهم. مثل این کد htmlمورد نیاز برای ایجاد منوی سادهبا 4 امتیاز:
به طور کلی سبک هایی برای او تجویز شده است، اما من همه آنها را نمی دهم. ما به جلوه خط کشی در هنگام نگه داشتن ماوس روی یک مورد علاقه مند هستیم. به این صورت پیاده سازی می شود:
منو li a:hover (حاشیه-پایین: 5px قهوه ای یکدست؛ )
همه چیز بسیار ساده است، اما این چیزی است که اتفاق می افتد (به هر موردی اشاره کنید):
موافقم، خیلی خوب نیست. علاوه بر این، برخی از محتواها در زیر قرار می گیرند و هر بار که ماوس می شوند، 5 پیکسل به پایین حرکت می کنند. همانطور که می دانید، یک قاب اندازه یک عنصر را افزایش می دهد.
در واقع، برای حل مشکل، ابتدا باید لینک را روی همان فریم با ضخامت 5 پیکسل تنظیم کنید، اما رنگ شفاف. در این حالت، هنگام شناور کردن، فقط رنگ قاب تغییر می کند.
منو li a (حاشیه پایین: 5 پیکسل جامد شفاف؛ )
من فقط یک خاصیت داده ام، بقیه سبک ها علاقه ای نداریم، می توانید خودتان بنویسید. اکنون، هنگام شناور کردن، هیچ لرزشی رخ نمی دهد، می توانید این را تأیید کنید:
عالی، امیدوارم به این سوال پاسخ داده باشم که css برای چه کاری لازم است قاب شفاف. شاید کاربردهای دیگری هم داشته باشد. یا بهتر بگویم ممکن نیست، اما قطعا. می توانید از آن برای ایجاد مثلث استفاده کنید. چگونه، نگاه کنید. بنابراین اینها گزینه هایی برای استفاده از یک قاب شفاف هستند.
