Фони та межі CSS

Модуль Фонів і меж CSS пропонує властивості для додавання до елементів меж, закруглених кутів та рамкових тіней.

Можна додавати різні типи стилів меж, включно з межами, зробленими з зображень будь-якого типу зображень, від растрових зображень до градієнтів CSS. Межі можуть бути квадратними або закругленими, і для кожного кута можна задати різний радіус. Елементи можуть бути закругленими незалежно від того, чи мають вони видиму межу.

Рамкові тіні включають внутрішні та зовнішні тіні, одну або кілька тіней, а також тіні, що переходять від непрозорості до прозорості. Зовнішня рамкова тінь відкидається так, ніби border-box елемента є непрозорим. Внутрішня тінь рамки відображає тінь так, ніби все за межами краю внутрішніх відступів – непрозоре. Тінь може бути непрозорою, а може мати відстань розсіювання, з кольором, що переходитиме до прозорого.

Властивості в цьому модулі також дозволяють визначати, чи мають клітинки всередині <table> спільні, чи мають окремі межі.

Фони, межі та рамкові тіні в дії

Цей зразок меж, фонів і рамкових тіней складається з відцентрованих зображень фонів, зроблених з лінійних і радіальних градієнтів. Низка рамкових тіней змушує межу ніби "виступати". В елемента зліва задано зображення межі. Елемент справа має закруглену пунктирну межу.

Фонові зображення визначені за допомогою background-image. Вони відцентровані за допомогою background-position. Різні значення властивості background-clip для кількох фонових зображень використовуються для того, щоб ці фонові зображення залишалися всередині рамки вмісту. Колір фону обрізається до рамки внутрішніх відступів, що не дає фону проступати крізь прозорі секції для border-image та пунктирний border. Закруглені кути в елементі справа створюються за допомогою властивості border-radius. Одне оголошення box-shadow використовується для задання всіх тіней, як внутрішніх, так і зовнішніх.

Щоб переглянути код цього зразка, дивіться його вихідний код на GitHub.

Довідка

Властивості

• background-attachment

• background-clip

• background-color

• background-image

• background-origin

• background-position

• background-repeat

• background-size

• Скорочення background

• background-position-x

• background-position-y

• background-position-inline

• background-position-block

• border-bottom-color

• border-bottom-style

• border-bottom-width

• Скорочення border-bottom

• border-left-color

• border-left-style

• border-left-width

• Скорочення border-left

• border-right-color

• border-right-style

• border-right-width

• Скорочення border-right

• border-top-color

• border-top-style

• border-top-width

• Скорочення border-top

• Скорочення border-color

• Скорочення border-style

• Скорочення border-width

• Скорочення border

• border-collapse

• border-bottom-left-radius

• border-bottom-right-radius

• border-top-left-radius

• border-top-right-radius

• Скорочення border-radius

• border-image-outset

• border-image-repeat

• border-image-slice

• border-image-source

• border-image-width

• Скорочення border-image

• box-shadow

Типи даних

• Перелічений тип line-style

Посібники

Вивчаймо CSS – Фони та межі

Пояснює, як реалізувати декоративні зображення за допомогою фонових зображень CSS.

Застосування кількох фонів

Пояснює, як задати на елементі один чи більше фонів.

Зміни розмірів зображень тла

Описує, як змінити розмір та повторюваність зображень тла.

Вивчаймо CSS – Рамкова модель

Пояснює, як межі, поруч з іншими властивостями рамкової моделі, впливають на рамкову модель CSS.

Застосування градієнтів CSS

Пояснює, як створювати градієнтові фонові зображення CSS.

Споріднені концепції

• Властивість border-block-end-color

• Властивість border-block-start-color

• Властивість border-inline-end-color

• Властивість border-inline-start-color

• Властивість border-block-end-style

• Властивість border-block-start-style

• Властивість border-inline-end-style

• Властивість border-inline-start-style

• Властивість border-block-end-width

• Властивість border-block-start-width

• Властивість border-inline-end-width

• Властивість border-inline-start-width

• Властивість border-start-start-radius

• Властивість border-start-end-radius

• Властивість border-end-start-radius

• Властивість border-end-end-radius

• Властивість box-sizing

• Властивість box-decoration-break

• Властивість text-shadow

• Тип CSS <url>

• Тип даних <color>

• Тип даних <image>

• Тип даних <position>

• Ключове слово currentcolor keyword

Специфікації

Дивіться також

• Інтерактивні інструменти, що дають змогу візуально створювати межові зображення, закруглені кути та рамкові тіні:
  • Генератор border-image
  • Генератор border-radius
  • Генератор box-shadow
• Застосування кольору до елементів HTML за допомогою CSS, включаючи межі.
• Фільтрувальна функція drop-shadow(), що застосовує до вихідного зображення ефект тіні. Вона використовується властивостями filter та backdrop-filter.