Zápis hodnot vlastností, u kterých je možné nastavovat všechny čtyři strany je možné zkrátit.
Definice | Horní | Pravý | Dolní | Levý |
---|---|---|---|---|
padding: 1px 2px 3px 4px; |
1 | 2 | 3 | 4 |
padding: 1px 2px 3px; |
1 | 2 | 3 | 2 |
padding: 1px 2px; |
1 | 2 | 1 | 2 |
padding: 1px; |
1 | 1 | 1 | 1 |
Umožňuje zkrácený zápis všech vlastností rámečku:
h1 {border: 4px groove green;} p {border: 4px ridge green;}
Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.
Samostatně lze zadávat i jednotlivé strany:
body { border-top: 10px solid lime; border-right: 10px double green; border-bottom: 10px dotted purple; border-left: 10px dashed blue; }
body { border: solid green; border-width: 1px 2px 3px 4px; }
Samostatně lze zadávat i jednotlivé strany:
body { border: solid green; border-top-width: 5px; border-right-width: 10px; border-bottom-width: 15px; border-left-width: 20px; }
Šířka vykreslování klíčových slov (thin, medium, thick) se v jednotlivých prohlížečích liší.
body { border: 10px green; border-style: solid; }
Samostatně lze zadávat i jednotlivé strany:
body { border: 10px green; border-top-style: double; border-right-style: dotted; border-bottom-style: dashed; border-left-style: none; }
IE6- vykresluje tečkovaný rámeček o šířce 1px čárkovaně.
IE5- vykresluje tečkovaný a čárkovaný rámeček jako spojitý.
body { border: 10px solid; border-color: red black blue green; }
Samostatně lze zadávat i jednotlivé strany:
body { border: 10px solid; border-top-color: red; border-right-color: black; border-bottom-color: blue; border-left-color: transparent; }
.radius { -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -o-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; position: relative; behavior: url('sites/all/themes/legadino/design/pie.htc'); }
V současné době nepodporují prohlížeče IE a Opera. Pro prohlížeče Mozilla Firefox, Google Chrome a Safari je možné již dnes používat zkušební vlastnosti -moz-border-radius a -webkit-border-radius.
Omezení:
<img>
není možné, ale můžete použít obrázek v pozadí elementu <div>
p {margin: 1em 0 .5em;}
Samostatně lze zadávat i jednotlivé strany:
p { margin-top: 1em; margin-right: 0; margin-bottom: .5em; margin-left: 0; }
th, td {padding: 0.1em .3em 0;}
Samostatně lze zadávat i jednotlivé strany:
th, td { padding-top: .1em; padding-right: .3em; padding-bottom: 0; padding-left: .3em; }
line-height
)overflow
#header {height: 100px;}
div {max-height: 100px;}
Nepodporuje IE6-
div {min-height: 100px;}
Nepodporuje IE6-
overflow
#header, #content, #footer {width: 760px;}
div {max-width: 100px;}
Nepodporuje IE6-
div {min-width: 100px;}
Nepodporuje IE6-
box-shadow: [horizontální posun] [vertikální posun] (rozostření) (roztažení) [barva] (pozice), (...další stíny...)
.box-shadow { -moz-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset, 0 -20px 20px 20px rgba(0, 0, 0, .7); /* FF(3.5-3.6) */ -webkit-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset, 0 -20px 20px 20px rgba(0, 0, 0, .7); /* Chrome(4-9), Safari(3.1-4), iOS(3.2-4.3), Android(2.1-3) */ box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset, 0 -20px 20px 20px rgba(0, 0, 0, .7); /* Opera10.5+, IE9+ */ }
Praktický příklad použití stínů je vidět např. u loga Microsoft.