Css background clip border box

CSS background-clip Property

Specify how far the background should extend within an element:

Definition and Usage

The background-clip property defines how far the background (color or image) should extend within an element.

Default value:	border-box
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.backgroundClip=»content-box» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
border-box	Default value. The background extends behind the border	Demo ❯
padding-box	The background extends to the inside edge of the border	Demo ❯
content-box	The background extends to the edge of the content box	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

background-clip

The background-clip CSS property sets whether an element’s background extends underneath its border box, padding box, or content box.

Try it

If the element has no background-image or background-color , this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image ); otherwise, the border masks the difference.

Note: Because the root element has a different background painting area, the background-clip property has no effect when specified on it. See «The backgrounds of special elements.»

Syntax

/* Keyword values */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /* Global values */ background-clip: inherit; background-clip: initial; background-clip: revert; background-clip: revert-layer; background-clip: unset; 

Values

The background extends to the outside edge of the border (but underneath the border in z-ordering).

The background extends to the outside edge of the padding. No background is drawn beneath the border.

The background is painted within (clipped to) the content box.

The background is painted within (clipped to) the foreground text.

Accessibility concerns

When using background-clip: text check that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

If the background image does not load, this could also lead to the text becoming unreadable. Add a fallback background-color to prevent this from happening, and test without the image.

Consider using feature queries with @supports to test for support of background-clip: text and provide an accessible alternative where it is not supported.

Formal definition

Initial value	border-box
Applies to	all elements. It also applies to ::first-letter and ::first-line .
Inherited	no
Computed value	as specified
Animation type	a repeatable list of

Formal syntax

background-clip =
#

=
border-box |
padding-box |
content-box

Examples

HTML

p class="border-box">The background extends behind the border.p> p class="padding-box"> The background extends to the inside edge of the border. p> p class="content-box"> The background extends only to the edge of the content box. p> p class="text">The background is clipped to the foreground text.p> 

CSS

p  border: 0.8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; > .border-box  background-clip: border-box; > .padding-box  background-clip: padding-box; > .content-box  background-clip: content-box; > .text  background-clip: text; -webkit-background-clip: text; color: rgba(0, 0, 0, 0.2); > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• The clip-path property creates a clipping region that defines what part of an entire element should be displayed.
• Background properties: background , background-color , background-image , background-origin
• Introduction to the CSS box model

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

background-clip

Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

Краткая информация

Синтаксис

background-clip: [padding-box | border-box | content-box | text]#

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

padding-box Фон отображается внутри границ. border-box Фон выводится под границами. content-box Фон отображается только внутри контента. text Фон отображается только внутри текста.

Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.

Результат использования значений свойства background-clip для элемента с пунктирной рамкой толщиной 10 пикселей показан на рис. 1.

padding-box	border-box	content-box

Рис. 1. Результат применения разных значений

Песочница

div < background-image: url(image/shark.jpg); background-size: cover; padding: 20px; border: 5px dashed #c26558; background-clip: >; -webkit-background-clip: > color: transparent >

Пример

Объектная модель

Объект.style.backgroundClip

Примечание

Firefox до версии 4 поддерживает свойство -moz-background-clip и значения padding и border .

В Chrome, Safari, Opera и Android значение text работает только со свойством -webkit-background-clip .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

border-box, padding-box, content-box	9	12	4	11.5	3.1	4
text	4	15	3.1	49

border-box, padding-box, content-box	2.1	4	12	3.2
text	2.1	49	15	3.2

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

Источник