Platform:
v1 Docs moved here!
v2 docs here!
div
aug
border
inset + border space
inset
inset space 20
inset + border
<aug>
Non-Inheritance: --aug-border, --aug-border-bg
--aug-border 5px;
--aug-border-bg: blue;
--aug-border 5px; --aug-border-bg: black;
--aug-border-bg: blue;
--aug-border 10px;
--aug-border-bg: blue;
--aug-border 10px;
--aug-border 5px; --aug-border-bg: blue;
--aug-border 5px;
--aug-border-bg: blue;
no aug settings
--aug-border 5px; --aug-border-bg: black;
--aug-border-bg: blue;
--aug-border-bg: red;
--aug-border 10px;
--aug-border-bg: blue; --aug-border 5px;
--aug-border-bg: red;
--aug-border 10px;
--aug-border 5px; --aug-border-bg: blue;
--aug-border-bg: red; --aug-border 1px;
--aug-border 10px;
--aug-border 5px; --aug-border-bg: blue;
--aug-border-bg: red; --aug-border 1px;
--aug-border-bg: none; --aug-border 14px;
--aug-border-bg: green; --aug-border 10px;
2px; #ce5;
--aug-border-bg:
inherit
; --aug-border 3px; (Max augmented depth for pre-chromium Edge Fallbacks)
2px; cyan;
Non-Inheritance: --aug-inset, --aug-inset-bg
--aug-inset 15px;
--aug-inset-bg: #ce5;
--aug-inset 5px; --aug-inset-bg: #ce5;
--aug-inset-bg: blue;
--aug-inset 10px;
--aug-inset-bg: blue;
--aug-inset 20px;
--aug-inset 5px; --aug-inset-bg: blue;
--aug-inset 5px;
--aug-inset-bg: blue;
no aug settings
--aug-inset 5px; --aug-inset-bg: black;
--aug-inset-bg: blue;
--aug-inset-bg: red;
--aug-inset 10px;
--aug-inset-bg: blue; --aug-inset 5px;
--aug-inset-bg: red;
--aug-inset 10px;
--aug-inset 5px; --aug-inset-bg: blue;
--aug-inset-bg: red; --aug-inset 1px;
--aug-inset 10px;
--aug-inset 5px; --aug-inset-bg: blue;
--aug-inset-bg: red; --aug-inset 1px;
--aug-inset-bg: none; --aug-inset 14px;
--aug-inset-bg: green; --aug-inset 10px;
--aug-inset-bg: #ce5;
background: purple; --aug-inset-bg:
inherit
; --aug-inset 2px; (Max augmented depth for pre-chromium Edge Fallbacks)
--aug-inset-bg: cyan;
Non-Inheritance: --aug-border-opacity, --aug-inset-opacity
Test base: { background: black; --aug-border: 5px; --aug-border-bg: blue; --aug-inset-bg: #2a2; }
[border opacity, inset opacity]:
[initial, initial]
[0.25, 0.5]
[,]
[0.33, initial]
[inherit, 0.75]
[1, 1]
[0.5, inherit]
(Max augmented depth for pre-chromium Edge Fallbacks)
[0, 0]
Aug: *-clip (* = tl, t, tr, r, br, b, bl, l)
tl-clip
t-clip
tr-clip
r-clip
br-clip
b-clip
bl-clip
l-clip
tl-clip
--aug-tl
t-clip
--aug-t
tr-clip
--aug-tr
r-clip
--aug-r
br-clip
--aug-br
b-clip
--aug-b
bl-clip
--aug-bl
l-clip
--aug-l
clip all
clip all
clip all
clip all
clip all
clip all
clean
border only
(0 width)
border only
border only
border only
(0 width)
border only
border only
clean
inset only
inset only
inset only
inset only
inset only
inset only
clean
Aug: *-round (* = tl, tr, br, bl)
tl-round
tr-round
br-round
bl-round
tl-round
--aug-tl
tr-round
--aug-tr
br-round
--aug-br
bl-round
--aug-bl
round corners
round corners
round corners
round corners
round corners
round corners
clean
border only
(0 width)
border only
border only
border only
(0 width)
border only
border only
clean
inset only
inset only
inset only
inset only
inset only
inset only
clean
Aug: *-rect (* = tl, t, tr, r, br, b, bl, l)
tl-rect
t-rect
tr-rect
r-rect
br-rect
b-rect
bl-rect
l-rect
tl-rect
--aug-tl
t-rect
--aug-t
tr-rect
--aug-tr
r-rect
--aug-r
br-rect
--aug-br
b-rect
--aug-b
bl-rect
--aug-bl
l-rect
--aug-l
tl-rect
--aug-tl-width
t-rect
--aug-t-width
tr-rect
--aug-tr-width
r-rect
--aug-r-width
br-rect
--aug-br-width
b-rect
--aug-b-width
bl-rect
--aug-bl-width
l-rect
--aug-l-width
tl-rect
--aug-tl-height
t-rect
--aug-t-height
tr-rect
--aug-tr-height
r-rect
--aug-r-height
br-rect
--aug-br-height
b-rect
--aug-b-height
bl-rect
--aug-bl-height
l-rect
--aug-l-height
rect all
rect all
rect all
rect all
rect all
rect all
clean
border only
(0 width)
border only
border only
border only
(0 width)
border only
border only
clean
inset only
inset only
inset only
inset only
inset only
inset only
clean
Aug: *-clip-x (* = tl, t, tr, r, br, b, bl, l)
tl-clip-x
t-clip-x
tr-clip-x
r-clip-x
br-clip-x
b-clip-x
bl-clip-x
l-clip-x
tl-clip-x
--aug-tl
t-clip-x
--aug-t
tr-clip-x
--aug-tr
r-clip-x
--aug-r
br-clip-x
--aug-br
b-clip-x
--aug-b
bl-clip-x
--aug-bl
l-clip-x
--aug-l
tl-clip-x
--aug-tl-width
t-clip-x
--aug-t-width
tr-clip-x
--aug-tr-width
r-clip-x
--aug-r-width
br-clip-x
--aug-br-width
b-clip-x
--aug-b-width
bl-clip-x
--aug-bl-width
l-clip-x
--aug-l-width
tl-clip-x
--aug-tl-height
t-clip-x
--aug-t-height
tr-clip-x
--aug-tr-height
r-clip-x
--aug-r-height
br-clip-x
--aug-br-height
b-clip-x
--aug-b-height
bl-clip-x
--aug-bl-height
l-clip-x
--aug-l-height
notch-x all
notch-x all
notch-x all
notch-x all
notch-x all
notch-x all
clean
border only
(0 width)
border only
border only
border only
(0 width)
border only
border only
clean
inset only
inset only
inset only
inset only
inset only
inset only
clean
Aug: *-clip-y (* = tl, t, tr, r, br, b, bl, l)
tl-clip-y
t-clip-y
tr-clip-y
r-clip-y
br-clip-y
b-clip-y
bl-clip-y
l-clip-y
tl-clip-y
--aug-tl
t-clip-y
--aug-t
tr-clip-y
--aug-tr
r-clip-y
--aug-r
br-clip-y
--aug-br
b-clip-y
--aug-b
bl-clip-y
--aug-bl
l-clip-y
--aug-l
tl-clip-y
--aug-tl-width
t-clip-y
--aug-t-width
tr-clip-y
--aug-tr-width
r-clip-y
--aug-r-width
br-clip-y
--aug-br-width
b-clip-y
--aug-b-width
bl-clip-y
--aug-bl-width
l-clip-y
--aug-l-width
tl-clip-y
--aug-tl-height
t-clip-y
--aug-t-height
tr-clip-y
--aug-tr-height
r-clip-y
--aug-r-height
br-clip-y
--aug-br-height
b-clip-y
--aug-b-height
bl-clip-y
--aug-bl-height
l-clip-y
--aug-l-height
notch-y all
notch-y all
notch-y all
notch-y all
notch-y all
notch-y all
clean
border only
(0 width)
border only
border only
border only
(0 width)
border only
border only
clean
inset only
inset only
inset only
inset only
inset only
inset only
clean
Aug Non-Inheritance
Top/Bottom Aug Offset Non-Inheritance
t -150px, b 25%
t default, b default
t 50px, b -50px
t -50px, b 50px
Right/Left Aug Offset Non-Inheritance
r -150px, l 25%
r default, l default
r 50px, l -50px
r -50px, l 50px
Top/Bottom Aug Origin X Non-Inheritance
t 50%, b 70px
t default, b default
t 25%, b 75%
t 75%, b 25%
Right/Left Aug Origin Y Non-Inheritance
l 70px, r 50%
l default, r default
l 75%, r 25%
l 25%, r 75%