Tło i obramowanie CSS

Źródło: CSS Backgrounds and Borders Module Level 3

background

Atrybuty mieszane tła

Wartość

[<bg-layer> ,]? <final-bg-layer>

Inicjalizacja

zobacz cechy indywidualne

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

zobacz cechy indywidualne

background-attachment

Zaczepienie tła

Wartość

<attachment>

Inicjalizacja

scroll

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

nie

background-clip

Przycinanie tła

Wartość

<box>

Inicjalizacja

border-box

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

nie

background-color

Kolor tła

Wartość

<color>

Inicjalizacja

transparent

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

nie

background-image

Tło obrazkowe

Wartość

<bg-image>

Inicjalizacja

none

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

nie

background-origin

Pozycja początkowa tła

Wartość

<box>

Inicjalizacja

padding-box

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

nie

background-position

Pozycja tła

Wartość

<bg-position>

Inicjalizacja

0% 0%

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

odnosi się do powierzchni pozycjonowania tła minus rozmiar obrazka tła

background-repeat

Powtarzanie tła

Wartość

<repeat-style>

Inicjalizacja

repeat

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

nie

background-size

Rozmiary tła

Wartość

<bg-size>

Inicjalizacja

auto

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

odnosi się do powierchni pozycjonowania tła

border

Atrybuty mieszane obramowania obramowania

Wartość

<line-width> || <line-style> || <color>

Inicjalizacja

zobacz cechy indywidualne

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-bottom

Atrybuty mieszane dolnego obramowania

Wartość

<line-width> || <line-style> || <color>

Inicjalizacja

zobacz cechy indywidualne

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-bottom-color

Kolor dolnego obramowania

Wartość

<color>

Inicjalizacja

currentColor

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-bottom-left-radius

Zaokrąglenie dolnego-lewego obramowania

Wartość

<length-percentage [0,∞]>{1,2}

Inicjalizacja

0

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

odnosi się do wymiarów pudełka

border-bottom-right-radius

Zaokrąglenie dolnego-prawego obramowania

Wartość

<length-percentage [0,∞]>{1,2}

Inicjalizacja

0

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

odnosi się do wymiarów pudełka

border-bottom-style

Styl dolnego obramowania

Wartość

<line-style>

Inicjalizacja

none

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-bottom-width

Szerokość dolnego obramowania

Wartość

<line-width>

Inicjalizacja

medium

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-color

Atrybuty mieszane koloru obramowania

Wartość

<color>{1,4}

Inicjalizacja

zobacz cechy indywidualne

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-image

Atrybuty mieszane obramowania obrazkowego

Wartość

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Inicjalizacja

zobacz cechy indywidualne

Zastosowanie

zobacz cechy indywidualne

Dziedziczenie

nie

Procenty

nie

border-image-outset

Nawis obramowania obrazkowego

Wartość

[ <length [0,∞]> | <number [0,∞]> ]{1,4}

Inicjalizacja

0

Zastosowanie

wszystkie elementy z wyjątkiem wewnętrznych elementów tabeli w przypadku "border-collapse: collapse"

Dziedziczenie

nie

Procenty

nie

border-image-repeat

Powtarzanie obramowania obrazkowego

Wartość

[ stretch | repeat | round | space ]{1,2}

Inicjalizacja

stretch

Zastosowanie

wszystkie elementy z wyjątkiem wewnętrznych elementów tabeli w przypadku "border-collapse: collapse"

Dziedziczenie

nie

Procenty

nie

border-image-slice

Obcięcie obramowania obrazkowego

Wartość

[<number [0,∞]> | <percentage [0,∞]>]{1,4} && fill?

Inicjalizacja

100%

Zastosowanie

wszystkie elementy z wyjątkiem wewnętrznych elementów tabeli w przypadku "border-collapse: collapse"

Dziedziczenie

nie

Procenty

odnosi się do rozmiaru obrazka obramowania

border-image-source

Obramowanie obrazkowe

Wartość

none | <image>

Inicjalizacja

none

Zastosowanie

wszystkie elementy z wyjątkiem wewnętrznych elementów tabeli w przypadku "border-collapse: collapse"

Dziedziczenie

nie

Procenty

nie

border-image-width

Szerokość obramowania obrazkowego

Wartość

[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

Inicjalizacja

1

Zastosowanie

wszystkie elementy z wyjątkiem wewnętrznych elementów tabeli w przypadku "border-collapse: collapse"

Dziedziczenie

nie

Procenty

odnosi się do szerokosći/wysokości obszaru obrazka obramowania

border-left

Atrybuty mieszane lewego obramowania

Wartość

<line-width> || <line-style> || <color>

Inicjalizacja

zobacz cechy indywidualne

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-left-color

Kolor lewego obramowania

Wartość

<color>

Inicjalizacja

currentColor

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-left-style

Styl lewego obramowania

Wartość

<line-style>

Inicjalizacja

none

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-left-width

Szerokość lewego obramowania

Wartość

<line-width>

Inicjalizacja

medium

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-radius

Atrybuty mieszane zaokrąglenia

Wartość

<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

Inicjalizacja

zobacz cechy indywidualne

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

odnosi się do wymiarów pudełka

border-right

Atrybuty mieszane prawego obramowania

Wartość

<line-width> || <line-style> || <color>

Inicjalizacja

zobacz cechy indywidualne

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-right-color

Kolor prawego obramowania

Wartość

<color>

Inicjalizacja

currentColor

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-right-style

Styl prawego obramowania

Wartość

<line-style>

Inicjalizacja

none

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-right-width

Szerokość prawego obramowania

Wartość

<line-width>

Inicjalizacja

medium

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-style

Atrybuty mieszane stylu obramowania

Wartość

<line-style>{1,4}

Inicjalizacja

zobacz cechy indywidualne

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-top

Atrybuty mieszane górnego obramowania

Wartość

<line-width> || <line-style> || <color>

Inicjalizacja

zobacz cechy indywidualne

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-top-color

Kolor górnego obramowania

Wartość

<color>

Inicjalizacja

currentColor

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-top-left-radius

Zaokraglenie górnego-lewego obramowania

Wartość

<length-percentage [0,∞]>{1,2}

Inicjalizacja

0

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

odnosi się do wymiarów pudełka

border-top-right-radius

Zaokraglenie górnego-prawego obramowania

Wartość

<length-percentage [0,∞]>{1,2}

Inicjalizacja

0

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

odnosi się do wymiarów pudełka

border-top-style

Styl górnego obramowania

Wartość

<line-style>

Inicjalizacja

none

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-top-width

Szerokość górnego obramowania

Wartość

<line-width>

Inicjalizacja

medium

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

nie

border-width

Atrybuty mieszane szerokości obramowania

Wartość

<line-width>{1,4}

Inicjalizacja

zobacz cechy indywidualne

Zastosowanie

wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby

Dziedziczenie

nie

Procenty

zobacz cechy indywidualne

box-shadow

Cień

Wartość

none | <shadow>

Inicjalizacja

none

Zastosowanie

wszystkie elementy

Dziedziczenie

nie

Procenty

nie

Przeglądarki

❌ Nie działa

	Chrome	Firefox	Edge	Opera	Safari
background: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
background: background-clip	21 2012-07-31	22 2013-06-25	12 2015-07-29	15 2013-07-02	5.1 2011-07-20
background: background-origin	21 2012-07-31	22 2013-06-25	12 2015-07-29	15 2013-07-02	5.1 2011-07-20
background: background-size	21 2012-07-31	9 2011-12-20	12 2015-07-29	21 2014-05-06	5.1 2011-07-20
background-attachment: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
background-attachment: scroll	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
background-clip: wartość	1 2008-12-11	4 2011-03-22	12 2015-07-29	10.5 2010-03-02	5 2010-06-07
background-clip: border-box	1 2008-12-11	4 2011-03-22	12 2015-07-29	15 2013-07-02	3 2007-10-26
background-clip: padding-box	1 2008-12-11	4 2011-03-22	12 2015-07-29	15 2013-07-02	3 2007-10-26
background-color: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
background-image: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
background-image: element	❌	❌	❌	❌	❌
background-image: none	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
background-origin: wartość	1 2008-12-11	4 2011-03-22	12 2015-07-29	10.5 2010-03-02	3 2007-10-26
background-origin: border-box	1 2008-12-11	4 2011-03-22	12 2015-07-29	15 2013-07-02	3 2007-10-26
background-origin: padding-box	1 2008-12-11	4 2011-03-22	12 2015-07-29	15 2013-07-02	3 2007-10-26
background-position: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
background-repeat: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
background-repeat: repeat	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
background-repeat: round	30 2013-10-01	49 2016-09-20	12 2015-07-29	17 2013-10-08	8 2014-10-16
background-repeat: space	30 2013-10-01	49 2016-09-20	12 2015-07-29	17 2013-10-08	8 2014-10-16
background-size: wartość	3 2009-09-15	4 2011-03-22	12 2015-07-29	10 2009-09-01	5 2010-06-07
background-size: auto	1 2008-12-11	3.6 2010-01-21	12 2015-07-29	15 2013-07-02	3 2007-10-26
border: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-bottom: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-bottom-color: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-bottom-left-radius: wartość	4 2010-01-25	4 2011-03-22	12 2015-07-29	10.5 2010-03-02	5 2010-06-07
border-bottom-right-radius: wartość	4 2010-01-25	4 2011-03-22	12 2015-07-29	10.5 2010-03-02	5 2010-06-07
border-bottom-style: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	9.2 2007-04-11	1 2003-06-23
border-bottom-width: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-color: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-image: wartość	16 2011-12-13	15 2012-08-28	12 2015-07-29	11 2010-12-16	6 2012-07-25
border-image: fill	16 2011-12-13	15 2012-08-28	12 2015-07-29	15 2013-07-02	6 2012-07-25
border-image-outset: wartość	15 2011-10-25	15 2012-08-28	12 2015-07-29	15 2013-07-02	6 2012-07-25
border-image-repeat: wartość	15 2011-10-25	15 2012-08-28	12 2015-07-29	15 2013-07-02	6 2012-07-25
border-image-repeat: repeat	15 2011-10-25	≤72 2020-01-07	12 2015-07-29	15 2013-07-02	6 2012-07-25
border-image-repeat: round	30 2013-10-01	15 2012-08-28	12 2015-07-29	17 2013-10-08	9.1 2016-03-21
border-image-repeat: space	56 2017-01-25	50 2016-11-15	12 2015-07-29	43 2017-02-07	9.1 2016-03-21
border-image-repeat: stretch	15 2011-10-25	≤72 2020-01-07	12 2015-07-29	15 2013-07-02	6 2012-07-25
border-image-slice: wartość	15 2011-10-25	15 2012-08-28	12 2015-07-29	15 2013-07-02	6 2012-07-25
border-image-source: wartość	15 2011-10-25	15 2012-08-28	12 2015-07-29	15 2013-07-02	6 2012-07-25
border-image-width: wartość	16 2011-12-13	13 2012-06-05	12 2015-07-29	15 2013-07-02	6 2012-07-25
border-image-width: auto	16 2011-12-13	15 2012-08-28	12 2015-07-29	15 2013-07-02	6 2012-07-25
border-left: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-left-color: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-left-style: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	9.2 2007-04-11	1 2003-06-23
border-left-width: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-radius: wartość	4 2010-01-25	4 2011-03-22	12 2015-07-29	10.5 2010-03-02	5 2010-06-07
border-right: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	9.2 2007-04-11	1 2003-06-23
border-right-color: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-right-style: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	9.2 2007-04-11	1 2003-06-23
border-right-width: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-style: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-style: none	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
border-top: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-top-color: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-top-left-radius: wartość	4 2010-01-25	4 2011-03-22	12 2015-07-29	10.5 2010-03-02	5 2010-06-07
border-top-right-radius: wartość	4 2010-01-25	4 2011-03-22	12 2015-07-29	10.5 2010-03-02	5 2010-06-07
border-top-style: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	9.2 2007-04-11	1 2003-06-23
border-top-width: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
border-width: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
box-shadow: wartość	10 2011-03-08	4 2011-03-22	12 2015-07-29	10.5 2010-03-02	5.1 2011-07-20