درس ۳۴ از ۴۵ · صفحه‌های وب

کادر، دورخط و سایه

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

در این درس

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

کوتاه‌نویسی کادر

کادر خطی است که میان فاصله‌ی داخلی جعبه و فضای بیرونش کشیده می‌شود. سه بخش دارد: ضخامت، سبک و رنگ. کوتاه‌نویسی کادر هر سه را در یک رشته و به هر ترتیب می‌گیرد: "2px یکپارچه #0f766e". عدد بدون گیومه، مثل 6، یعنی پیکسل. سبک تعیین می‌کند چه کشیده شود: یکپارچه خط ساده است، خط‌چین و نقطه‌چین خط‌های گسسته‌اند، دوتایی دو خط باریک با فاصله است، و شیاری، برآمده، فرورفته و بیرون‌زده با روشن‌تر و تیره‌تر کردن دو به دو سمت‌ها لبه‌ای کنده‌کاری‌شده یا برجسته را تقلید می‌کنند. هیچ چیزی نمی‌کشد و پنهان هم همین را می‌کند، ولی وقتی در جدول دو کادر به هم برسند، پنهان برنده است.

web-border-styles.salam

بخش نمونه(سبک):
    جعبه:
        سبک کادر = سبک
        ضخامت کادر = 6
        رنگ کادر = "#0f766e"
        فاصله = 12
        محتوا = سبک
    پایان
پایان

صفحه:
    عنوان = "سبک‌های کادر"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه:
        نمایش = "شبکه" شکاف = 12 ستون های شبکه = "repeat(auto-fit, minmax(110px, 1fr))" تراز متن = "وسط"
        نمونه: سبک = "یکپارچه" پایان
        نمونه: سبک = "خط‌چین" پایان
        نمونه: سبک = "نقطه‌چین" پایان
        نمونه: سبک = "دوتایی" پایان
        نمونه: سبک = "شیاری" پایان
        نمونه: سبک = "برآمده" پایان
        نمونه: سبک = "فرورفته" پایان
        نمونه: سبک = "بیرون‌زده" پایان
    پایان
پایان

نمونه یک بخش کوچک به نام نمونه دارد تا هر سبک کادر یک خط باشد. نام سبک را به سبک کادر می‌دهد و همان را به‌صورت متن هم نشان می‌دهد. همین سه بخش ویژگی‌های جداگانه هم دارند: ضخامت کادر، سبک کادر و رنگ کادر.

سبک بخشی است که همه فراموشش می‌کنند. سبک پیش‌فرض هیچ است، پس رنگ کادر = "قرمز" یا ضخامت کادر = 5 به‌تنهایی اصلاً چیزی نمی‌کشند. همیشه سبک بنویسید، یا در کوتاه‌نویسی یا با سبک کادر = "یکپارچه".

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

کادر بخشی از جعبه است. با اندازه‌گیری پیش‌فرض، جعبه‌ای با عرض = 200 و کادر ۶ پیکسلی در هر سمت ۲۱۲ پیکسل پهن می‌شود. بسیاری از صفحه‌ها قاعده‌ی سراسری اندازه جعبه = "border-box" را می‌گذارند که عرض را شامل فاصله‌ی داخلی و کادر می‌کند، و درس‌های بعد فرض می‌کنند هر دو روش را می‌دانید.

هر بار یک سمت

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

web-border-sides.salam

صفحه:
    عنوان = "کادر روی یک سمت"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه:
        نمایش = "شبکه" شکاف = 14
        جعبه: کادر چپ = "6px یکپارچه #dc2626" پس زمینه = "#fef2f2" فاصله = "10px 14px" محتوا = "هشدار: کادر چپ" پایان
        سرتیتر: اندازه = 3 فضا = 0 فاصله = "0 0 6px 0" کادر پایین = "3px یکپارچه #0f766e" محتوا = "سرتیتر: کادر پایین" پایان
        جعبه: سبک کادر = "یکپارچه" ضخامت کادر = "2px 10px" رنگ کادر = "#6366f1" فاصله = 12 محتوا = "دو مقدار: بالا و پایین، چپ و راست" پایان
        جعبه: سبک کادر = "یکپارچه" ضخامت کادر = 6 رنگ کادر = "#ef4444 #22c55e #3b82f6 #eab308" فاصله = 12 محتوا = "چهار رنگ: بالا، راست، پایین، چپ" پایان
    پایان
پایان

سمتی که کادر ندارد را می‌توانید نگذارید. راه همیشگی ساختن کادر آمیخته این است که اول کادر را بگذارید و بعد همان یک سمتی را که باید فرق کند بازنویسی کنید، مثلاً کادر = "1px یکپارچه #cbd5e1" و بعد رنگ کادر پایین = "#0f766e". ویژگی بعدی برنده است، پس ترتیب خط‌ها اهمیت دارد.

سمت‌های منطقی برای هر زبان

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

از اینجا کادر خطی آغاز، کادر خطی انتها، کادر بلوکی آغاز و کادر بلوکی انتها می‌آید، هر کدام با ضخامت، سبک و رنگ خودش. کوتاه‌نویسی کادر خطی هر دو سمت خطی را می‌گذارد و کادر بلوکی هر دو سمت بلوکی را، و شکل رنگ، سبک و ضخامتشان یک یا دو مقدار می‌گیرد (آغاز، بعد انتها). در نمونه یک خط کد نوار را در جعبه‌ی فارسی در راست و در جعبه‌ی انگلیسی در چپ می‌گذارد، چون جعبه‌ی دوم جهت = "چپ به راست" دارد.

web-border-logical.salam

صفحه:
    عنوان = "کادرهای منطقی"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه:
        جهت = "راست به چپ"
        کادر خطی آغاز = "6px یکپارچه #0f766e"
        فاصله = "10px 14px"
        فضا = "0 0 14px 0"
        پس زمینه = "#f0fdfa"
        محتوا = "متن فارسی: خط کنار راست است."
    پایان
    جعبه:
        جهت = "چپ به راست"
        کادر خطی آغاز = "6px یکپارچه #0f766e"
        فاصله = "10px 14px"
        پس زمینه = "#f0fdfa"
        محتوا = "English text: the stripe is on the left."
    پایان
پایان

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

گوشه‌های گرد

گردی کادر گوشه‌ها را گرد می‌کند. یک طول گوشه‌هایی دایره‌ای با آن شعاع می‌سازد. دو تا چهار مقدار ترتیب گوشه‌ها را دنبال می‌کنند: با دو مقدار، اولی برای گوشه‌های بالا چپ و پایین راست است و دومی برای بالا راست و پایین چپ؛ با چهار مقدار از بالا چپ و در جهت عقربه‌های ساعت می‌روند. یک خط مورب گوشه‌ی بیضی می‌سازد: 50% / 30% شعاع افقی ۵۰٪ و شعاع عمودی ۳۰٪ می‌دهد. شعاعی که از آنچه جعبه جا دارد بزرگ‌تر باشد کم می‌شود، پس 999px راه همیشگی ساختن قرص است و 50% روی مربع دایره می‌سازد.

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

web-border-radius.salam

بخش کاشی(برچسب، گوشه):
    جعبه:
        عرض = 100
        ارتفاع = 70
        پس زمینه = "#f59e0b"
        نمایش = "فلکس"
        ترازعمودی = "وسط"
        چینش = "وسط"
        اندازه قلم = 13
        گردی کادر = گوشه
        محتوا = برچسب
    پایان
پایان

صفحه:
    عنوان = "گوشهی گرد"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه:
        نمایش = "فلکس" شکاف = 14 پیچش آرایش = "پیچیده"
        کاشی: برچسب = "12" گوشه = 12 پایان
        کاشی: برچسب = "30px 0" گوشه = "30px 0" پایان
        کاشی: برچسب = "قرصی" گوشه = "999px" پایان
        کاشی: برچسب = "50% / 30%" گوشه = "50% / 30%" پایان
        کاشی: برچسب = "۴ مقدار" گوشه = "40px 4px 40px 4px" پایان
        جعبه: عرض = 70 ارتفاع = 70 گردی کادر = "50%" پس زمینه = "#f59e0b" پایان
        جعبه: عرض = 100 ارتفاع = 70 گردی کادر بالا چپ = 40 پس زمینه = "#f59e0b" نمایش = "فلکس" ترازعمودی = "وسط" چینش = "وسط" اندازه قلم = 13 محتوا = "بالا چپ" پایان
        جعبه: عرض = 100 ارتفاع = 70 گردی کادر آغاز انتها = 35 پس زمینه = "#f59e0b" نمایش = "فلکس" ترازعمودی = "وسط" چینش = "وسط" اندازه قلم = 13 محتوا = "آغاز انتها" پایان
    پایان
پایان

گرد کردن پس‌زمینه، کادر و سایه را شکل می‌دهد ولی محتوا را نمی‌برد. فرزندی که از جعبه بزرگ‌تر است باز هم از گوشه‌ی گردش بیرون می‌زند، مگر اینکه جعبه سرریز = "پنهان" داشته باشد.

تصویر کادر

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

ویژگی‌هایی که آن را کنترل می‌کنند: برش تصویر کادر (از هر لبه‌ی عکس تا کجا ببرد، به‌صورت تعدادی از پیکسل‌های خود عکس یا درصد)، ضخامت تصویر کادر (قاب چقدر ضخیم کشیده شود، یک طول یا مضربی از ضخامت کادر)، بیرون‌زدگی تصویر کادر (چقدر بیرون جعبه برسد) و تکرار تصویر کادر (stretch، repeat، گرد یا space). تصویر کادر کوتاه‌نویسی هر پنج است، به ترتیب منبع برش / ضخامت / بیرون‌زدگی تکرار. خود کادر باز هم باید ضخامت داشته باشد و رنگ شفاف انتخاب همیشگی است تا زیر عکس چیزی نیفتد.

web-border-image.salam

پایا قاب := "url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2790%27 height=%2790%27%3E%3Crect x=%275%27 y=%275%27 width=%2780%27 height=%2780%27 rx=%2710%27 fill=%27none%27 stroke=%27%230f766e%27 stroke-width=%274%27/%3E%3Ccircle cx=%2715%27 cy=%2715%27 r=%2712%27 fill=%27%23f59e0b%27/%3E%3Ccircle cx=%2775%27 cy=%2715%27 r=%2712%27 fill=%27%23f59e0b%27/%3E%3Ccircle cx=%2715%27 cy=%2775%27 r=%2712%27 fill=%27%23f59e0b%27/%3E%3Ccircle cx=%2775%27 cy=%2775%27 r=%2712%27 fill=%27%23f59e0b%27/%3E%3C/svg%3E')"

صفحه:
    عنوان = "تصویر کادر"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه:
        عرض = 260
        فاصله = 14
        کادر = "30px یکپارچه شفاف"
        منبع تصویر کادر = قاب
        برش تصویر کادر = 30
        ضخامت تصویر کادر = "30px"
        تکرار تصویر کادر = "گرد"
        محتوا = "چهار گوشه از گوشه‌های تصویر می‌آیند. لبه‌ها کشیده یا تکرار می‌شوند تا به اندازه‌ی جعبه شوند."
    پایان
پایان

قاب نمونه یک تصویر کوچک SVG است که به‌صورت نشانی داده نوشته شده و در هر گوشه دایره‌ای کهربایی دارد. چون گوشه‌ها کپی می‌شوند و هرگز کشیده نمی‌شوند، دایره‌ها روی جعبه‌ای با هر اندازه گرد می‌مانند، و گرد لبه‌ها را به تعداد کامل تکرار می‌کند تا تکه‌ای بریده نشود. رنگ‌شیب هم منبع خوبی است و با برش ۱ کادر رنگ‌شیب محبوب را می‌سازد: تصویر کادر = "linear-gradient(135deg, #f59e0b, #db2777) 1". تنها کاری که تصویر کادر نمی‌تواند بکند پیروی از گردی کادر است، چون تصویر جای خطی را می‌گیرد که شعاع باید خمش می‌کرد.

دورخط و حلقه‌ی تمرکز

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

تمرکز عنصری است که صفحه‌کلید به آن می‌رسد. کسی که نمی‌تواند از موس استفاده کند با Tab از پیوند به دکمه و فیلد می‌رود و حلقه‌ی تمرکز تنها چیزی است که نشان می‌دهد کجاست. حالت را به‌صورت پیشوند بنویسید: تمرکز دورخط = "3px یکپارچه #2563eb" فقط وقتی اعمال می‌شود که عنصر تمرکز دارد. در نمونه کلیک کنید و Tab بزنید: دکمه حلقه‌ی آبی با سه پیکسل فاصله می‌گیرد و ورودی حلقه‌ی صورتی.

web-border-outline.salam

صفحه:
    عنوان = "دورخط و حلقه‌ی تمرکز"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه:
        نمایش = "فلکس" شکاف = 24 پیچش آرایش = "پیچیده" ترازعمودی = "وسط"
        دکمه:
            شناسه = "go"
            محتوا = "با Tab بیایید"
            فاصله = "8px 16px"
            کادر = "2px یکپارچه #0f766e"
            پس زمینه = "سفید"
            گردی کادر = 6
            تمرکز دورخط = "3px یکپارچه #2563eb"
            تمرکز فاصله دورخط = 3
        پایان
        ورودی: نوع = "متنی" جانگهدار = "مرا فعال کنید" فاصله = 8 تمرکز رنگ دورخط = "#db2777" تمرکز ضخامت دورخط = 3 تمرکز سبک دورخط = "یکپارچه" پایان
        جعبه: دورخط = "3px خط‌چین #db2777" فاصله دورخط = 6 فاصله = 12 محتوا = "فاصله دورخط ۶" پایان
    پایان
پایان

هرگز برای خلاص شدن از حلقه‌ای که مرورگر دور کنترل متمرکز می‌کشد دورخط = "هیچ" ننویسید، مگر اینکه سبک تمرکز دیگری که به‌روشنی دیده شود جایش بگذارید. بدون حلقه کاربر صفحه‌کلید نمی‌داند کجاست و صفحه از قواعد دسترس‌پذیری که بسیاری از کشورها می‌خواهند رد می‌شود. راه درست برای حلقه‌ی زشت، حلقه‌ی زیباتر است و نه بی‌حلقه. حلقه باید نسبت تضاد دست‌کم ۳ به ۱ با پیرامونش داشته باشد.

سایه‌ی کادر

سایه کادر پشت جعبه سایه‌ای می‌کشد که به گوشه‌های گردش شکل می‌گیرد. یک سایه تا پنج بخش دارد: x y محو گسترش رنگ. دو عدد اول سایه را به راست و پایین می‌برند (عدد منفی به چپ و بالا). محو لبه را نرم می‌کند: ۰ تیز است و عدد بزرگ‌تر نرم‌تر. گسترش سایه را از جعبه بزرگ‌تر یا، اگر منفی باشد، کوچک‌تر می‌کند. رنگ تقریباً همیشه سیاه شفافی مثل rgb(0 0 0 / 20%) است، چون سایه می‌گذارد صفحه از آن دیده شود. اگر inset را اول بگذارید سایه درون جعبه کشیده می‌شود، انگار جعبه فرو رفته است.

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

web-border-shadow.salam

بخش کارت(برچسب، سایه):
    جعبه:
        پس زمینه = "سفید"
        عرض = 120
        ارتفاع = 80
        نمایش = "فلکس"
        ترازعمودی = "وسط"
        چینش = "وسط"
        تراز متن = "وسط"
        اندازه قلم = 13
        گردی کادر = 10
        سایه کادر = سایه
        محتوا = برچسب
    پایان
پایان

صفحه:
    عنوان = "سایه‌ی کادر"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 0 فاصله = "1.5rem" پس زمینه = "#e2e8f0" پایان
    جعبه:
        نمایش = "فلکس" شکاف = 24 پیچش آرایش = "پیچیده"
        کارت: برچسب = "نرم" سایه = "0 4px 12px rgb(0 0 0 / 18%)" پایان
        کارت: برچسب = "جابه‌جایی تیز" سایه = "6px 6px 0 #0f172a" پایان
        کارت: برچسب = "حلقه‌ی گسترش" سایه = "0 0 0 4px #60a5fa" پایان
        کارت: برچسب = "درونی" سایه = "inset 0 3px 8px rgb(0 0 0 / 30%)" پایان
        کارت: برچسب = "درخشش" سایه = "0 0 24px #22d3ee" پایان
        کارت: برچسب = "لایه‌لایه" سایه = "0 1px 2px rgb(0 0 0 / 20%), 0 8px 24px rgb(0 0 0 / 18%)" پایان
    پایان
پایان

نمونه‌ی بعد می‌گذارد مقدارها را امتحان کنید. لغزنده‌ها box-shadow و border-radius تازه‌ای برای کارت می‌نویسند و CSS ساخته‌شده را چاپ می‌کنند تا ببینید هر عدد ظاهر را چطور عوض می‌کند.

web-border-play.salam

واردسازی دام

تابع تازه():
    افقی := دام.دریافت مقدار(دام.با شناسه("x"))
    عمودی := دام.دریافت مقدار(دام.با شناسه("y"))
    محو := دام.دریافت مقدار(دام.با شناسه("blur"))
    گردی := دام.دریافت مقدار(دام.با شناسه("radius"))
    سایه := افقی + "px " + عمودی + "px " + محو + "px rgb(0 0 0 / 35%)"
    دام.تنظیم سبک(دام.با شناسه("card")، "box-shadow"، سایه)
    دام.تنظیم سبک(دام.با شناسه("card")، "border-radius"، گردی + "px")
    دام.تنظیم متن(دام.با شناسه("css")، "box-shadow: " + سایه + "; border-radius: " + گردی + "px")
پایان

صفحه:
    عنوان = "آزمایشگاه سایه"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه: شناسه = "card" عرض = 180 ارتفاع = 90 فضا = "10px 0 20px" پس زمینه = "سفید" کادر = "1px یکپارچه #cbd5e1" سایه کادر = "0px 4px 12px rgb(0 0 0 / 35%)" گردی کادر = 12 پایان
    جعبه: برچسب: محتوا = "افقی" عرض = 70 نمایش = "inline-block" پایان ورودی: نوع = "بازه" شناسه = "x" کمینه = "-20" بیشینه = "20" مقدار = "0" ورودی = تازه پایان پایان
    جعبه: برچسب: محتوا = "عمودی" عرض = 70 نمایش = "inline-block" پایان ورودی: نوع = "بازه" شناسه = "y" کمینه = "-20" بیشینه = "20" مقدار = "4" ورودی = تازه پایان پایان
    جعبه: برچسب: محتوا = "محو" عرض = 70 نمایش = "inline-block" پایان ورودی: نوع = "بازه" شناسه = "blur" کمینه = "0" بیشینه = "40" مقدار = "12" ورودی = تازه پایان پایان
    جعبه: برچسب: محتوا = "گردی" عرض = 70 نمایش = "inline-block" پایان ورودی: نوع = "بازه" شناسه = "radius" کمینه = "0" بیشینه = "45" مقدار = "12" ورودی = تازه پایان پایان
    پاراگراف: شناسه = "css" محتوا = "box-shadow: 0px 4px 12px rgb(0 0 0 / 35%); border-radius: 12px" پایان
پایان

سایه فقط تزیین است و هرگز چیدمان را عوض نمی‌کند، پس می‌تواند روی همسایه‌ها بیفتد و والدی با سرریز = "پنهان" می‌تواند آن را ببرد. برای متن از سایه متن و برای شکل تصویری که بخش شفاف دارد از پالایه‌ی drop-shadow() درس قبل استفاده کنید.

جعبه‌های شکسته و شکل‌های تازه‌ی گوشه

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

web-border-break.salam

صفحه:
    عنوان = "شکستن تزیین جعبه"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "280px" ارتفاع خط = 2.2 پایان
    پاراگراف:
        محتوا = "برش (پیش‌فرض): "
        تکه: پس زمینه = "#fde68a" فاصله = "2px 10px" گردی کادر = 8 کادر = "2px یکپارچه #b45309" شکستن تزیین جعبه = "slice" محتوا = "یک رنگ‌آمیزی که هنگام رفتن به سطر بعد تکه‌تکه می‌شود" پایان
    پایان
    پاراگراف:
        محتوا = "نسخه‌برداری: "
        تکه: پس زمینه = "#fde68a" فاصله = "2px 10px" گردی کادر = 8 کادر = "2px یکپارچه #b45309" شکستن تزیین جعبه = "clone" محتوا = "هر تکه فاصله، کادر و گوشه‌های خودش را دارد" پایان
    پایان
پایان

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

web-border-corners.salam

بخش کاشی(برچسب، شکل):
    جعبه:
        عرض = 100
        ارتفاع = 80
        پس زمینه = "#7c3aed"
        رنگ = "سفید"
        نمایش = "فلکس"
        ترازعمودی = "وسط"
        چینش = "وسط"
        گردی کادر = 28
        اندازه قلم = 13
        شکل گوشه = شکل
        محتوا = برچسب
    پایان
پایان

صفحه:
    عنوان = "شکل گوشه‌ها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه:
        نمایش = "فلکس" شکاف = 16 پیچش آرایش = "پیچیده"
        کاشی: برچسب = "گرد" شکل = "گرد" پایان
        کاشی: برچسب = "چهارگرد" شکل = "چهارگرد" پایان
        کاشی: برچسب = "پخ" شکل = "پخ" پایان
        کاشی: برچسب = "گود" شکل = "گود" پایان
        کاشی: برچسب = "شکاف" شکل = "شکاف" پایان
        کاشی: برچسب = "گود و پخ" شکل = "گود پخ" پایان
    پایان
پایان

شکل گوشه تازه است و فعلاً فقط مرورگرهای مبتنی بر Chromium آن را می‌کشند. در بقیه‌ی مرورگرها گوشه‌ها همان گرد می‌مانند، که جایگزین خوبی است چون جعبه باز هم کار می‌کند. طراحی را هنوز به آن وابسته نکنید. کادر جدول‌ها و border collapse در درس ویژگی‌های بیشتر آمده است.

مترجم مقدارها را چگونه بررسی می‌کند

هر مقدار سبک در صفحه هنگام ترجمه بررسی می‌شود و نه در مرورگر. مرورگر مقدار CSS ناشناخته را بی‌صدا نادیده می‌گیرد و صفحه فقط بد به نظر می‌رسد، بدون هیچ پیامی. در سلام مقدار نادرست ساخت را با خطای E018 متوقف می‌کند. پیام نام ویژگی را می‌گوید، مقداری که نوشته‌اید را نشان می‌دهد و می‌گوید چه انتظار می‌رفت. مثلاً اگر در سبک کادر سبکی به نام wobbly بنویسید، پیام با E018: مقدار نامعتبر برای 'سبک کادر': 'wobbly' ... شروع می‌شود و مقدارهای مجاز را فهرست می‌کند و بعد پرونده، سطر و ستونی را که مقدار آنجاست می‌آورد. شعاع big می‌گوید طول یا درصد نیست، و کوتاه‌نویسی کادر با بخش‌هایی که به هم نمی‌خورند می‌گوید ترکیب معتبری برای این ویژگی نیست.

بررسی روی کوتاه‌نویسی‌ها هم کار می‌کند. کادر را به بخش‌هایش می‌شکند و هر بخش را با قاعده‌ی خودش می‌سنجد، پس غلط تایپی در نام رنگ درون "2px یکپارچه reed" هم پیدا می‌شود. نام‌های فارسی مقدارها مثل یکپارچه و خط‌چین در همین جاها پذیرفته می‌شوند. جدول‌های زیر مقدارهایی را که هر ویژگی می‌پذیرد نشان می‌دهند.

مرجع: کادر، دورخط و سایه

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

همه‌ی سمت‌ها

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`کادر` border border	دور هر چهار سمت کادر می‌کشد. مقدار یک عرض، یک سبک و یک رنگ است به هر ترتیب، مثل `2px یکپارچه #0f766e`. سبک الزامی است، چون `هیچ` که پیش‌فرض است چیزی نشان نمی‌دهد. [CSS-wide keywords only]	`جعبه: فاصله = 12 کادر = "2px یکپارچه #0f766e" محتوا = "کادر" پایان`
`ضخامت کادر` border width border-width	ضخامت کادرها، با همان قاعده‌ی یک تا چهار مقدار `رنگ کادر`. هر مقدار یک طول است، یا `thin`، `medium` و `thick`. [length / thin, medium, thick; up to 4 values]	`جعبه: فاصله = 12 سبک کادر = "یکپارچه" رنگ کادر = "#0f766e" ضخامت کادر = "1px 4px 8px 12px" محتوا = "۱، ۴، ۸، ۱۲" پایان`
`سبک کادر` border style border-style	سبک خط کادرها، با همان قاعده‌ی یک تا چهار مقدار `رنگ کادر`. مقدارها `هیچ`، `پنهان`، `نقطه‌چین`، `خط‌چین`، `یکپارچه`، `دوتایی`، `شیاری`، `برآمده`، `فرورفته` و `بیرون‌زده` هستند. [none, hidden, dotted, dashed, solid, double, ...; up to 4 values]	`جعبه: فاصله = 12 کادر = "6px یکپارچه #7c3aed" سبک کادر = "یکپارچه خط‌چین" محتوا = "یکپارچه، خط‌چین" پایان`
`رنگ کادر` border color border-color	رنگ کادرها. یک مقدار هر چهار سمت را رنگ می‌کند؛ دو مقدار یعنی بالا و پایین، بعد چپ و راست؛ سه مقدار یعنی بالا، چپ و راست، پایین؛ چهار مقدار از بالا و در جهت عقربه‌های ساعت می‌روند. [color; up to 4 values]	`جعبه: فاصله = 12 کادر = "8px یکپارچه سیاه" رنگ کادر = "#ef4444 #22c55e #3b82f6 #eab308" محتوا = "چهار رنگ" پایان`

بالا

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`کادر بالا` border top border-top	عرض، سبک و رنگ کادر بالا را در یک مقدار می‌گذارد، مثل `3px یکپارچه #0f766e`. بخشی که ننویسید مقدار پیش‌فرضش را می‌گیرد و سبک باید حتماً باشد، چون سبک پیش‌فرض `هیچ` چیزی نمی‌کشد. [CSS-wide keywords only]	`جعبه: فاصله = 12 کادر بالا = "3px یکپارچه #0f766e" محتوا = "کادر بالا" پایان`
`ضخامت کادر بالا` border top width border-top-width	ضخامت کادر بالا: یک طول مثل `4px`، یا `thin`، `medium` و `thick`. تا وقتی سبک `هیچ` است اثری ندارد. [length / thin, medium, thick]	`جعبه: فاصله = 12 کادر = "1px یکپارچه #0f766e" ضخامت کادر بالا = 8 محتوا = "بالا 8px" پایان`
`سبک کادر بالا` border top style border-top-style	سبک خط کادر بالا: `هیچ`، `پنهان`، `نقطه‌چین`، `خط‌چین`، `یکپارچه`، `دوتایی`، `شیاری`، `برآمده`، `فرورفته` یا `بیرون‌زده`. بدون سبک چیزی کشیده نمی‌شود. [none, hidden, dotted, dashed, solid, double, ...]	`جعبه: فاصله = 12 کادر = "6px یکپارچه #0f766e" سبک کادر بالا = "خط‌چین" محتوا = "بالا خط‌چین" پایان`
`رنگ کادر بالا` border top color border-top-color	فقط رنگ کادر بالا. هر رنگی می‌پذیرد. بدون آن کادر از `رنگ` متن عنصر استفاده می‌کند. [color]	`جعبه: فاصله = 12 کادر = "4px یکپارچه #cbd5e1" رنگ کادر بالا = "#db2777" محتوا = "رنگ بالا" پایان`

راست

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`کادر راست` border right border-right	عرض، سبک و رنگ کادر راست را در یک مقدار می‌گذارد، مثل `5px یکپارچه #dc2626`. بخشی که ننویسید مقدار پیش‌فرضش را می‌گیرد و سبک باید حتماً باشد، چون سبک پیش‌فرض `هیچ` چیزی نمی‌کشد. [CSS-wide keywords only]	`جعبه: فاصله = 12 کادر راست = "5px یکپارچه #dc2626" محتوا = "کادر راست" پایان`
`ضخامت کادر راست` border right width border-right-width	ضخامت کادر راست: یک طول مثل `4px`، یا `thin`، `medium` و `thick`. تا وقتی سبک `هیچ` است اثری ندارد. [length / thin, medium, thick]	`جعبه: فاصله = 12 کادر = "1px یکپارچه #dc2626" ضخامت کادر راست = 11 محتوا = "راست 11px" پایان`
`سبک کادر راست` border right style border-right-style	سبک خط کادر راست: `هیچ`، `پنهان`، `نقطه‌چین`، `خط‌چین`، `یکپارچه`، `دوتایی`، `شیاری`، `برآمده`، `فرورفته` یا `بیرون‌زده`. بدون سبک چیزی کشیده نمی‌شود. [none, hidden, dotted, dashed, solid, double, ...]	`جعبه: فاصله = 12 کادر = "6px یکپارچه #dc2626" سبک کادر راست = "نقطه‌چین" محتوا = "راست نقطه‌چین" پایان`
`رنگ کادر راست` border right color border-right-color	فقط رنگ کادر راست. هر رنگی می‌پذیرد. بدون آن کادر از `رنگ` متن عنصر استفاده می‌کند. [color]	`جعبه: فاصله = 12 کادر = "4px یکپارچه #cbd5e1" رنگ کادر راست = "#ca8a04" محتوا = "رنگ راست" پایان`

پایین

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`کادر پایین` border bottom border-bottom	عرض، سبک و رنگ کادر پایین را در یک مقدار می‌گذارد، مثل `7px یکپارچه #2563eb`. بخشی که ننویسید مقدار پیش‌فرضش را می‌گیرد و سبک باید حتماً باشد، چون سبک پیش‌فرض `هیچ` چیزی نمی‌کشد. [CSS-wide keywords only]	`جعبه: فاصله = 12 کادر پایین = "7px یکپارچه #2563eb" محتوا = "کادر پایین" پایان`
`ضخامت کادر پایین` border bottom width border-bottom-width	ضخامت کادر پایین: یک طول مثل `4px`، یا `thin`، `medium` و `thick`. تا وقتی سبک `هیچ` است اثری ندارد. [length / thin, medium, thick]	`جعبه: فاصله = 12 کادر = "1px یکپارچه #2563eb" ضخامت کادر پایین = 14 محتوا = "پایین 14px" پایان`
`سبک کادر پایین` border bottom style border-bottom-style	سبک خط کادر پایین: `هیچ`، `پنهان`، `نقطه‌چین`، `خط‌چین`، `یکپارچه`، `دوتایی`، `شیاری`، `برآمده`، `فرورفته` یا `بیرون‌زده`. بدون سبک چیزی کشیده نمی‌شود. [none, hidden, dotted, dashed, solid, double, ...]	`جعبه: فاصله = 12 کادر = "6px یکپارچه #2563eb" سبک کادر پایین = "دوتایی" محتوا = "پایین دوتایی" پایان`
`رنگ کادر پایین` border bottom color border-bottom-color	فقط رنگ کادر پایین. هر رنگی می‌پذیرد. بدون آن کادر از `رنگ` متن عنصر استفاده می‌کند. [color]	`جعبه: فاصله = 12 کادر = "4px یکپارچه #cbd5e1" رنگ کادر پایین = "#7c3aed" محتوا = "رنگ پایین" پایان`

چپ

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`کادر چپ` border left border-left	عرض، سبک و رنگ کادر چپ را در یک مقدار می‌گذارد، مثل `9px یکپارچه #db2777`. بخشی که ننویسید مقدار پیش‌فرضش را می‌گیرد و سبک باید حتماً باشد، چون سبک پیش‌فرض `هیچ` چیزی نمی‌کشد. [CSS-wide keywords only]	`جعبه: فاصله = 12 کادر چپ = "9px یکپارچه #db2777" محتوا = "کادر چپ" پایان`
`ضخامت کادر چپ` border left width border-left-width	ضخامت کادر چپ: یک طول مثل `4px`، یا `thin`، `medium` و `thick`. تا وقتی سبک `هیچ` است اثری ندارد. [length / thin, medium, thick]	`جعبه: فاصله = 12 کادر = "1px یکپارچه #db2777" ضخامت کادر چپ = 17 محتوا = "چپ 17px" پایان`
`سبک کادر چپ` border left style border-left-style	سبک خط کادر چپ: `هیچ`، `پنهان`، `نقطه‌چین`، `خط‌چین`، `یکپارچه`، `دوتایی`، `شیاری`، `برآمده`، `فرورفته` یا `بیرون‌زده`. بدون سبک چیزی کشیده نمی‌شود. [none, hidden, dotted, dashed, solid, double, ...]	`جعبه: فاصله = 12 کادر = "6px یکپارچه #db2777" سبک کادر چپ = "شیاری" محتوا = "چپ شیاری" پایان`
`رنگ کادر چپ` border left color border-left-color	فقط رنگ کادر چپ. هر رنگی می‌پذیرد. بدون آن کادر از `رنگ` متن عنصر استفاده می‌کند. [color]	`جعبه: فاصله = 12 کادر = "4px یکپارچه #cbd5e1" رنگ کادر چپ = "#ea580c" محتوا = "رنگ چپ" پایان`

سمت‌های بلوکی

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`کادر بلوکی` border block border-block	کادر هر دو سمت بلوکی را یک‌جا می‌گذارد، که در متن افقی بالا و پایین‌اند. همان عرض، سبک و رنگ `کادر` را می‌پذیرد. [CSS-wide keywords only]	`جعبه: فاصله = 12 کادر بلوکی = "3px یکپارچه #0f766e" محتوا = "بلوکی: بالا و پایین" پایان`
`ضخامت کادر بلوکی` border block width border-block-width	ضخامت دو کادر بلوکی. یک مقدار هر دو را می‌گذارد؛ دو مقدار اول آغاز و بعد انتها را. [length / thin, medium, thick; up to 2 values]	`جعبه: فاصله = 12 کادر = "1px یکپارچه #7c3aed" ضخامت کادر بلوکی = "2px 10px" محتوا = "بالا نازک، پایین ضخیم" پایان`
`سبک کادر بلوکی` border block style border-block-style	سبک خط دو کادر بلوکی. یک مقدار هر دو را می‌گذارد؛ دو مقدار اول آغاز و بعد انتها را. [none, hidden, dotted, dashed, solid, double, ...; up to 2 values]	`جعبه: فاصله = 12 کادر = "5px یکپارچه #0f766e" سبک کادر بلوکی = "خط‌چین دوتایی" محتوا = "بالا خط‌چین، پایین دوتایی" پایان`
`رنگ کادر بلوکی` border block color border-block-color	رنگ دو کادر بلوکی. یک مقدار هر دو را رنگ می‌کند؛ دو مقدار اول آغاز و بعد انتها را. [color; up to 2 values]	`جعبه: فاصله = 12 کادر = "5px یکپارچه #e2e8f0" رنگ کادر بلوکی = "#dc2626 #2563eb" محتوا = "آغاز قرمز، انتها آبی" پایان`
`کادر بلوکی آغاز` border block start border-block-start	عرض، سبک و رنگ کادر را در آغاز جهت بلوکی (در متن افقی، بالا) در یک مقدار می‌گذارد. از جهت نوشتن پیروی می‌کند، پس همان کد در صفحه‌های چپ‌به‌راست و راست‌به‌چپ کار می‌کند. [CSS-wide keywords only]	`جعبه: فاصله = 12 کادر بلوکی آغاز = "4px یکپارچه #7c3aed" محتوا = "کادر بلوکی آغاز" پایان`
`ضخامت کادر بلوکی آغاز` border block start width border-block-start-width	ضخامت کادر در آغاز جهت بلوکی (در متن افقی، بالا): یک طول، یا `thin`، `medium` و `thick`. [length / thin, medium, thick]	`جعبه: فاصله = 12 کادر = "1px یکپارچه #7c3aed" ضخامت کادر بلوکی آغاز = 9 محتوا = "کادر بلوکی آغاز 9px" پایان`
`سبک کادر بلوکی آغاز` border block start style border-block-start-style	سبک خط کادر در آغاز جهت بلوکی (در متن افقی، بالا): `هیچ`، `پنهان`، `نقطه‌چین`، `خط‌چین`، `یکپارچه`، `دوتایی`، `شیاری`، `برآمده`، `فرورفته` یا `بیرون‌زده`. [none, hidden, dotted, dashed, solid, double, ...]	`جعبه: فاصله = 12 کادر = "6px یکپارچه #7c3aed" سبک کادر بلوکی آغاز = "خط‌چین" محتوا = "کادر بلوکی آغاز خط‌چین" پایان`
`رنگ کادر بلوکی آغاز` border block start color border-block-start-color	رنگ کادر در آغاز جهت بلوکی (در متن افقی، بالا). هر رنگی می‌پذیرد. [color]	`جعبه: فاصله = 12 کادر = "4px یکپارچه #e2e8f0" رنگ کادر بلوکی آغاز = "#16a34a" محتوا = "رنگ کادر بلوکی آغاز" پایان`
`کادر بلوکی انتها` border block end border-block-end	عرض، سبک و رنگ کادر را در انتهای جهت بلوکی (در متن افقی، پایین) در یک مقدار می‌گذارد. از جهت نوشتن پیروی می‌کند، پس همان کد در صفحه‌های چپ‌به‌راست و راست‌به‌چپ کار می‌کند. [CSS-wide keywords only]	`جعبه: فاصله = 12 کادر بلوکی انتها = "6px یکپارچه #ea580c" محتوا = "کادر بلوکی انتها" پایان`
`ضخامت کادر بلوکی انتها` border block end width border-block-end-width	ضخامت کادر در انتهای جهت بلوکی (در متن افقی، پایین): یک طول، یا `thin`، `medium` و `thick`. [length / thin, medium, thick]	`جعبه: فاصله = 12 کادر = "1px یکپارچه #ea580c" ضخامت کادر بلوکی انتها = 11 محتوا = "کادر بلوکی انتها 11px" پایان`
`سبک کادر بلوکی انتها` border block end style border-block-end-style	سبک خط کادر در انتهای جهت بلوکی (در متن افقی، پایین): `هیچ`، `پنهان`، `نقطه‌چین`، `خط‌چین`، `یکپارچه`، `دوتایی`، `شیاری`، `برآمده`، `فرورفته` یا `بیرون‌زده`. [none, hidden, dotted, dashed, solid, double, ...]	`جعبه: فاصله = 12 کادر = "6px یکپارچه #ea580c" سبک کادر بلوکی انتها = "نقطه‌چین" محتوا = "کادر بلوکی انتها نقطه‌چین" پایان`
`رنگ کادر بلوکی انتها` border block end color border-block-end-color	رنگ کادر در انتهای جهت بلوکی (در متن افقی، پایین). هر رنگی می‌پذیرد. [color]	`جعبه: فاصله = 12 کادر = "4px یکپارچه #e2e8f0" رنگ کادر بلوکی انتها = "#be123c" محتوا = "رنگ کادر بلوکی انتها" پایان`

سمت‌های خطی

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`کادر خطی` border inline border-inline	کادر هر دو سمت خطی را یک‌جا می‌گذارد، که در متن افقی چپ و راست‌اند. همان عرض، سبک و رنگ `کادر` را می‌پذیرد. [CSS-wide keywords only]	`جعبه: فاصله = 12 کادر خطی = "4px نقطه‌چین #ea580c" محتوا = "خطی: چپ و راست" پایان`
`ضخامت کادر خطی` border inline width border-inline-width	ضخامت دو کادر خطی. یک مقدار هر دو را می‌گذارد؛ دو مقدار اول آغاز و بعد انتها را. [length / thin, medium, thick; up to 2 values]	`جعبه: فاصله = 12 کادر = "1px یکپارچه #be123c" ضخامت کادر خطی = "12px 2px" محتوا = "آغاز ضخیم، انتها نازک" پایان`
`سبک کادر خطی` border inline style border-inline-style	سبک خط دو کادر خطی. یک مقدار هر دو را می‌گذارد؛ دو مقدار اول آغاز و بعد انتها را. [none, hidden, dotted, dashed, solid, double, ...; up to 2 values]	`جعبه: فاصله = 12 کادر = "5px یکپارچه #0891b2" سبک کادر خطی = "یکپارچه نقطه‌چین" محتوا = "آغاز یکپارچه، انتها نقطه‌چین" پایان`
`رنگ کادر خطی` border inline color border-inline-color	رنگ دو کادر خطی. یک مقدار هر دو را رنگ می‌کند؛ دو مقدار اول آغاز و بعد انتها را. [color; up to 2 values]	`جعبه: فاصله = 12 کادر = "5px یکپارچه #e2e8f0" رنگ کادر خطی = "#16a34a #ca8a04" محتوا = "آغاز سبز، انتها زرد" پایان`
`کادر خطی آغاز` border inline start border-inline-start	عرض، سبک و رنگ کادر را در سمتی که سطر متن از آن شروع می‌شود (در انگلیسی چپ، در فارسی راست) در یک مقدار می‌گذارد. از جهت نوشتن پیروی می‌کند، پس همان کد در صفحه‌های چپ‌به‌راست و راست‌به‌چپ کار می‌کند. [CSS-wide keywords only]	`جعبه: فاصله = 12 کادر خطی آغاز = "8px یکپارچه #0891b2" محتوا = "کادر خطی آغاز" پایان`
`ضخامت کادر خطی آغاز` border inline start width border-inline-start-width	ضخامت کادر در سمتی که سطر متن از آن شروع می‌شود (در انگلیسی چپ، در فارسی راست): یک طول، یا `thin`، `medium` و `thick`. [length / thin, medium, thick]	`جعبه: فاصله = 12 کادر = "1px یکپارچه #0891b2" ضخامت کادر خطی آغاز = 13 محتوا = "کادر خطی آغاز 13px" پایان`
`سبک کادر خطی آغاز` border inline start style border-inline-start-style	سبک خط کادر در سمتی که سطر متن از آن شروع می‌شود (در انگلیسی چپ، در فارسی راست): `هیچ`، `پنهان`، `نقطه‌چین`، `خط‌چین`، `یکپارچه`، `دوتایی`، `شیاری`، `برآمده`، `فرورفته` یا `بیرون‌زده`. [none, hidden, dotted, dashed, solid, double, ...]	`جعبه: فاصله = 12 کادر = "6px یکپارچه #0891b2" سبک کادر خطی آغاز = "دوتایی" محتوا = "کادر خطی آغاز دوتایی" پایان`
`رنگ کادر خطی آغاز` border inline start color border-inline-start-color	رنگ کادر در سمتی که سطر متن از آن شروع می‌شود (در انگلیسی چپ، در فارسی راست). هر رنگی می‌پذیرد. [color]	`جعبه: فاصله = 12 کادر = "4px یکپارچه #e2e8f0" رنگ کادر خطی آغاز = "#4f46e5" محتوا = "رنگ کادر خطی آغاز" پایان`
`کادر خطی انتها` border inline end border-inline-end	عرض، سبک و رنگ کادر را در سمتی که سطر متن در آن تمام می‌شود (در انگلیسی راست، در فارسی چپ) در یک مقدار می‌گذارد. از جهت نوشتن پیروی می‌کند، پس همان کد در صفحه‌های چپ‌به‌راست و راست‌به‌چپ کار می‌کند. [CSS-wide keywords only]	`جعبه: فاصله = 12 کادر خطی انتها = "10px یکپارچه #16a34a" محتوا = "کادر خطی انتها" پایان`
`ضخامت کادر خطی انتها` border inline end width border-inline-end-width	ضخامت کادر در سمتی که سطر متن در آن تمام می‌شود (در انگلیسی راست، در فارسی چپ): یک طول، یا `thin`، `medium` و `thick`. [length / thin, medium, thick]	`جعبه: فاصله = 12 کادر = "1px یکپارچه #16a34a" ضخامت کادر خطی انتها = 15 محتوا = "کادر خطی انتها 15px" پایان`
`سبک کادر خطی انتها` border inline end style border-inline-end-style	سبک خط کادر در سمتی که سطر متن در آن تمام می‌شود (در انگلیسی راست، در فارسی چپ): `هیچ`، `پنهان`، `نقطه‌چین`، `خط‌چین`، `یکپارچه`، `دوتایی`، `شیاری`، `برآمده`، `فرورفته` یا `بیرون‌زده`. [none, hidden, dotted, dashed, solid, double, ...]	`جعبه: فاصله = 12 کادر = "6px یکپارچه #16a34a" سبک کادر خطی انتها = "برآمده" محتوا = "کادر خطی انتها برآمده" پایان`
`رنگ کادر خطی انتها` border inline end color border-inline-end-color	رنگ کادر در سمتی که سطر متن در آن تمام می‌شود (در انگلیسی راست، در فارسی چپ). هر رنگی می‌پذیرد. [color]	`جعبه: فاصله = 12 کادر = "4px یکپارچه #e2e8f0" رنگ کادر خطی انتها = "#0d9488" محتوا = "رنگ کادر خطی انتها" پایان`

گوشه‌ها

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`گردی کادر` border radius border-radius	گوشه‌ها را گرد می‌کند. یک مقدار هر چهار گوشه را گرد می‌کند؛ دو مقدار یعنی بالا چپ با پایین راست، بعد بالا راست با پایین چپ؛ چهار مقدار از بالا چپ و در جهت عقربه‌های ساعت می‌روند. علامت `/` شعاع افقی و عمودی را جدا می‌دهد تا گوشه بیضی شود، و `50%` روی یک مربع دایره می‌سازد. [length / percentage; up to 4 values]	`جعبه: عرض = 120 ارتفاع = 70 فاصله = 8 پس زمینه = "#bae6fd" گردی کادر = "24px 4px" محتوا = "24px 4px" پایان`
`گردی کادر بالا چپ` border top left radius border-top-left-radius	فقط گوشه‌ی بالا چپ را گرد می‌کند. یک مقدار آن را دایره‌ای می‌کند؛ دو مقدار (`40px 20px`) بیضی با شعاع افقی و بعد عمودی می‌سازد. [length / percentage; up to 2 values]	`جعبه: عرض = 120 ارتفاع = 70 فاصله = 8 پس زمینه = "#bae6fd" گردی کادر بالا چپ = "40px 20px" محتوا = "بالا چپ 40px 20px" پایان`
`گردی کادر بالا راست` border top right radius border-top-right-radius	فقط گوشه‌ی بالا راست را گرد می‌کند. یک مقدار آن را دایره‌ای می‌کند؛ دو مقدار (`40px 20px`) بیضی با شعاع افقی و بعد عمودی می‌سازد. [length / percentage; up to 2 values]	`جعبه: عرض = 120 ارتفاع = 70 فاصله = 8 پس زمینه = "#bae6fd" گردی کادر بالا راست = 30 محتوا = "بالا راست 30" پایان`
`گردی کادر پایین چپ` border bottom left radius border-bottom-left-radius	فقط گوشه‌ی پایین چپ را گرد می‌کند. یک مقدار آن را دایره‌ای می‌کند؛ دو مقدار (`40px 20px`) بیضی با شعاع افقی و بعد عمودی می‌سازد. [length / percentage; up to 2 values]	`جعبه: عرض = 120 ارتفاع = 70 فاصله = 8 پس زمینه = "#bae6fd" گردی کادر پایین چپ = "50%" محتوا = "پایین چپ 50%" پایان`
`گردی کادر پایین راست` border bottom right radius border-bottom-right-radius	فقط گوشه‌ی پایین راست را گرد می‌کند. یک مقدار آن را دایره‌ای می‌کند؛ دو مقدار (`40px 20px`) بیضی با شعاع افقی و بعد عمودی می‌سازد. [length / percentage; up to 2 values]	`جعبه: عرض = 120 ارتفاع = 70 فاصله = 8 پس زمینه = "#bae6fd" گردی کادر پایین راست = "60px 10px" محتوا = "پایین راست 60px 10px" پایان`
`گردی کادر آغاز آغاز` border start start radius border-start-start-radius	گوشه‌ی میان آغاز بلوکی و آغاز خطی (در انگلیسی بالا چپ، در فارسی بالا راست) را گرد می‌کند. مثل بقیه‌ی ویژگی‌های منطقی از جهت نوشتن پیروی می‌کند. یک یا دو مقدار، مثل گوشه‌های فیزیکی. [length / percentage; up to 2 values]	`جعبه: عرض = 120 ارتفاع = 70 فاصله = 8 پس زمینه = "#bae6fd" گردی کادر آغاز آغاز = 28 محتوا = "ر آغاز آغاز" پایان`
`گردی کادر آغاز انتها` border start end radius border-start-end-radius	گوشه‌ی میان آغاز بلوکی و انتهای خطی (در انگلیسی بالا راست، در فارسی بالا چپ) را گرد می‌کند. مثل بقیه‌ی ویژگی‌های منطقی از جهت نوشتن پیروی می‌کند. یک یا دو مقدار، مثل گوشه‌های فیزیکی. [length / percentage; up to 2 values]	`جعبه: عرض = 120 ارتفاع = 70 فاصله = 8 پس زمینه = "#bae6fd" گردی کادر آغاز انتها = "36px 12px" محتوا = "ر آغاز انتها" پایان`
`گردی کادر انتها آغاز` border end start radius border-end-start-radius	گوشه‌ی میان انتهای بلوکی و آغاز خطی (در انگلیسی پایین چپ، در فارسی پایین راست) را گرد می‌کند. مثل بقیه‌ی ویژگی‌های منطقی از جهت نوشتن پیروی می‌کند. یک یا دو مقدار، مثل گوشه‌های فیزیکی. [length / percentage; up to 2 values]	`جعبه: عرض = 120 ارتفاع = 70 فاصله = 8 پس زمینه = "#bae6fd" گردی کادر انتها آغاز = "50%" محتوا = "ر انتها آغاز" پایان`
`گردی کادر انتها انتها` border end end radius border-end-end-radius	گوشه‌ی میان انتهای بلوکی و انتهای خطی (در انگلیسی پایین راست، در فارسی پایین چپ) را گرد می‌کند. مثل بقیه‌ی ویژگی‌های منطقی از جهت نوشتن پیروی می‌کند. یک یا دو مقدار، مثل گوشه‌های فیزیکی. [length / percentage; up to 2 values]	`جعبه: عرض = 120 ارتفاع = 70 فاصله = 8 پس زمینه = "#bae6fd" گردی کادر انتها انتها = 40 محتوا = "ر انتها انتها" پایان`

تصویر کادر

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`تصویر کادر` border image border-image	کوتاه‌نویسی تصویر کادر: یک منبع، بعد برش، بعد پهنا و بیرون‌زدگی پس از `/`، و بعد تکرار، مثل `linear-gradient(#f59e0b, #db2777) 1 / 8px`. خود کادر باید پهنا داشته باشد و رنگ شفاف می‌گذارد تصویر دیده شود. [CSS-wide keywords only]	`جعبه: فاصله = 12 کادر = "14px یکپارچه شفاف" تصویر کادر = "linear-gradient(135deg, #f59e0b, #db2777) 1" محتوا = "قاب رنگ‌شیب" پایان`
`منبع تصویر کادر` border image source border-image-source	تصویری که به‌جای کادر کشیده می‌شود: یک `url(...)` (نشانی داده هم می‌شود)، یک رنگ‌شیب، یا `هیچ`. [image]	`جعبه: فاصله = 12 کادر = "14px یکپارچه شفاف" منبع تصویر کادر = "linear-gradient(90deg, #22d3ee, #6366f1)" برش تصویر کادر = 1 محتوا = "منبع تصویر" پایان`
`برش تصویر کادر` border image slice border-image-slice	تصویر را کجا به نه تکه ببرد: تا چهار عدد یا درصد که از لبه‌های بالا، راست، پایین و چپ تصویر اندازه گرفته می‌شوند. گوشه‌ها همان‌طور که هستند به کار می‌روند و لبه‌ها تکرار یا کشیده می‌شوند. کلمه‌ی `fill` تکه‌ی میانی را هم نگه می‌دارد. [number / percentage; up to 5 values]	`جعبه: فاصله = 12 کادر = "14px یکپارچه شفاف" منبع تصویر کادر = "repeating-linear-gradient(45deg, #0f766e 0 6px, #99f6e4 6px 12px)" برش تصویر کادر = 2 محتوا = "برش ۲" پایان`
`ضخامت تصویر کادر` border image width border-image-width	اندازه‌ی ناحیه‌ای که تصویر در آن کشیده می‌شود، یک تا چهار مقدار: یک طول، درصدی از جعبه، یا یک عدد ساده که در پهنای کادر ضرب می‌شود. پیش‌فرض `1` است. [length / percentage / number; up to 4 values]	`جعبه: فاصله = 12 کادر = "14px یکپارچه شفاف" منبع تصویر کادر = "linear-gradient(#f43f5e, #f59e0b)" برش تصویر کادر = 1 ضخامت تصویر کادر = 2 محتوا = "دو برابر پهنای کادر" پایان`
`بیرون‌زدگی تصویر کادر` border image outset border-image-outset	تصویر چقدر از جعبه‌ی کادر به بیرون رانده شود، یک تا چهار مقدار به‌صورت طول یا عددی ساده از پهنای کادر. در چیدمان جایی اشغال نمی‌کند. [length / number; up to 4 values]	`جعبه: فضا = 16 فاصله = 12 کادر = "14px یکپارچه شفاف" منبع تصویر کادر = "linear-gradient(135deg, #16a34a, #0891b2)" برش تصویر کادر = 1 بیرون‌زدگی تصویر کادر = 8 محتوا = "۸ پیکسل بیرون" پایان`
`تکرار تصویر کادر` border image repeat border-image-repeat	تکه‌های لبه چگونه سمتشان را پر کنند، یک مقدار برای هر دو جهت یا دو مقدار (افقی، عمودی): `stretch` (پیش‌فرض)، `repeat`، `گرد` (تکرار با تغییر اندازه برای جا شدن تعداد کامل) و `space` (تکرار با فاصله). [up to 2 values]	`جعبه: فاصله = 12 کادر = "14px یکپارچه شفاف" منبع تصویر کادر = "repeating-linear-gradient(90deg, #7c3aed 0 10px, #ddd6fe 10px 20px)" برش تصویر کادر = 1 تکرار تصویر کادر = "گرد" محتوا = "گرد" پایان`

دورخط

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`دورخط` outline outline	دور بیرون عنصر خطی می‌کشد، به همان شکل `عرض سبک رنگ` مثل `کادر`. در چیدمان جایی نمی‌گیرد و در مرورگرهای امروزی از گوشه‌های گرد پیروی می‌کند. حلقه‌ی تمرکز همان دورخط است. [CSS-wide keywords only]	`جعبه: فاصله = 12 دورخط = "3px یکپارچه #2563eb" محتوا = "دورخط" پایان`
`ضخامت دورخط` outline width outline-width	ضخامت دورخط: یک طول، یا `thin`، `medium` و `thick`. تا وقتی سبک `هیچ` است اثری ندارد. [length / thin, medium, thick]	`جعبه: فاصله = 12 سبک دورخط = "یکپارچه" رنگ دورخط = "#ea580c" ضخامت دورخط = 6 محتوا = "دورخط ۶ پیکسل" پایان`
`سبک دورخط` outline style outline-style	سبک خط دورخط: همان مقدارهای سبک کادر، و `خودکار` که از مرورگر حلقه‌ی تمرکز بومی خودش را می‌خواهد. [auto, none, hidden, dotted, dashed, solid, ...]	`جعبه: فاصله = 12 سبک دورخط = "نقطه‌چین" ضخامت دورخط = 3 رنگ دورخط = "#7c3aed" محتوا = "دورخط نقطه‌چین" پایان`
`رنگ دورخط` outline color outline-color	رنگ دورخط. هر رنگی می‌پذیرد. دورخط تمرکز را هم روی عنصر و هم روی صفحه‌ی پشتش به‌خوبی دیدنی نگه دارید. [color]	`جعبه: فاصله = 12 سبک دورخط = "یکپارچه" ضخامت دورخط = 3 رنگ دورخط = "#db2777" محتوا = "دورخط صورتی" پایان`
`فاصله دورخط` outline offset outline-offset	فاصله‌ی دورخط تا لبه‌ی جعبه‌ی کادر، به‌صورت یک طول. مقدار مثبت دورخط را دور می‌کند و مقدار منفی آن را به درون می‌کشد. پیش‌فرض `0` است. [length]	`جعبه: فاصله = 12 فضا = 10 دورخط = "2px خط‌چین #0f766e" فاصله دورخط = 8 محتوا = "۸ پیکسل دورتر" پایان`

سایه، شکستن و شکل گوشه‌ها

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`شکستن تزیین جعبه` box decoration break box-decoration-break	چه بر سر فاصله‌ی داخلی، کادر و پس‌زمینه‌ی عنصری می‌آید که میان چند سطر یا ستون شکسته می‌شود. `slice` (پیش‌فرض) یک تکه را به چند بخش می‌برد و `clone` به هر بخش آرایش کامل خودش را می‌دهد. [slice, clone]	`پاراگراف: عرض = 180 محتوا = "یک " تکه: شکستن تزیین جعبه = "clone" پس زمینه = "#fde68a" فاصله = "0 8px" گردی کادر = 6 محتوا = "نشانه‌ی رنگی که روی دو سطر می‌رود" پایان پایان`
`سایه کادر` box shadow box-shadow	یک یا چند سایه دور جعبه می‌کشد. هر سایه `x y محو گسترش رنگ` است: جابه‌جایی افقی و عمودی، نرمی لبه، اینکه چقدر بزرگ‌تر یا کوچک‌تر باشد و رنگش. کلمه‌ی `inset` آن را درون می‌کشد. چند سایه را با ویرگول جدا کنید؛ اولی رویی‌ترین است. [comma list]	`جعبه: فاصله = 16 گردی کادر = 10 سایه کادر = "0 6px 16px rgb(0 0 0 / 20%), inset 0 0 0 1px #cbd5e1" محتوا = "دو سایه" پایان`
`شکل گوشه` corner shape corner-shape	شکل گوشه‌هایی را که `گردی کادر` گرد می‌کند عوض می‌کند، یک تا چهار مقدار: `گرد` (پیش‌فرض)، `چهارگرد`، `پخ`، `گود`، `شکاف`، `square` یا `superellipse()`. تازه است و فعلاً فقط در مرورگرهای مبتنی بر Chromium کار می‌کند؛ جاهای دیگر گوشه‌ها گرد می‌مانند. [up to 4 of round, scoop, bevel, notch, square, squircle, superellipse()]	`جعبه: فاصله = 16 گردی کادر = 24 شکل گوشه = "چهارگرد" پس زمینه = "#0ea5e9" رنگ = "سفید" محتوا = "چهارگرد" پایان`
`شکل گوشه بالا چپ` corner top left shape corner-top-left-shape	شکل فقط گوشه‌ی بالا چپ: `گرد`، `چهارگرد`، `پخ`، `گود`، `شکاف`، `square` یا `superellipse()`. برای دیده شدن به `گردی کادر` نیاز دارد و فعلاً فقط مرورگرهای مبتنی بر Chromium آن را می‌کشند. [a corner shape keyword or superellipse()]	`جعبه: فاصله = 16 گردی کادر = 28 شکل گوشه بالا چپ = "گود" پس زمینه = "#ea580c" رنگ = "سفید" محتوا = "بالا چپ: گود" پایان`
`شکل گوشه بالا راست` corner top right shape corner-top-right-shape	شکل فقط گوشه‌ی بالا راست: `گرد`، `چهارگرد`، `پخ`، `گود`، `شکاف`، `square` یا `superellipse()`. برای دیده شدن به `گردی کادر` نیاز دارد و فعلاً فقط مرورگرهای مبتنی بر Chromium آن را می‌کشند. [a corner shape keyword or superellipse()]	`جعبه: فاصله = 16 گردی کادر = 28 شکل گوشه بالا راست = "پخ" پس زمینه = "#16a34a" رنگ = "سفید" محتوا = "بالا راست: پخ" پایان`
`شکل گوشه پایین چپ` corner bottom left shape corner-bottom-left-shape	شکل فقط گوشه‌ی پایین چپ: `گرد`، `چهارگرد`، `پخ`، `گود`، `شکاف`، `square` یا `superellipse()`. برای دیده شدن به `گردی کادر` نیاز دارد و فعلاً فقط مرورگرهای مبتنی بر Chromium آن را می‌کشند. [a corner shape keyword or superellipse()]	`جعبه: فاصله = 16 گردی کادر = 28 شکل گوشه پایین چپ = "شکاف" پس زمینه = "#7c3aed" رنگ = "سفید" محتوا = "پایین چپ: شکاف" پایان`
`شکل گوشه پایین راست` corner bottom right shape corner-bottom-right-shape	شکل فقط گوشه‌ی پایین راست: `گرد`، `چهارگرد`، `پخ`، `گود`، `شکاف`، `square` یا `superellipse()`. برای دیده شدن به `گردی کادر` نیاز دارد و فعلاً فقط مرورگرهای مبتنی بر Chromium آن را می‌کشند. [a corner shape keyword or superellipse()]	`جعبه: فاصله = 16 گردی کادر = 28 شکل گوشه پایین راست = "چهارگرد" پس زمینه = "#db2777" رنگ = "سفید" محتوا = "پایین راست: چهارگرد" پایان`

خودتان امتحان کنید

جعبه‌ی اعلانی با کادر خطی آغاز ضخیم و قرمز بسازید، بعد آن را درون جعبه‌ای با جهت = "چپ به راست" بگذارید و ببینید نوار خودبه‌خود جابه‌جا می‌شود.
دکمه‌ای قرصی با سایه کادر بسازید که در حالت فشردن کوچک‌تر شود و حلقه‌ی تمرکزی به رنگ دیگر داشته باشد.
با تصویر کادر و برش ۱ کادر رنگ‌شیب بسازید و بکوشید گوشه‌هایش را گرد کنید. چه می‌شود و به‌جایش چه می‌شود به کار برد؟
به آزمایشگاه سایه لغزنده‌ی چهارمی برای گسترش اضافه کنید و تیکی که کلمه‌ی inset را می‌افزاید.