BORDER & BOX
Udvalgte CSS-koder
BORDER-WIDTH
border: 1px solid grey;
border: 0.5em solid grey;
border-top: 8px solid grey;
border-right: 0.5em solid grey;
border-bottom: 0.5em solid grey;
border-left: 8px solid grey;
border-top: 1px solid grey; border-right: none solid grey; border-bottom: 3px solid grey; border-left: 1em;
border-width: 1px 0px 3px 1em;
border-style: solid;
border-color: grey;
BORDER-STYLE
border-style: none;
border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-top: 1px solid grey; border-right: none; border-bottom: 3px dashed grey; border-left: 1em double;
border-width: 1px 0px 3px 1em;
border-style: solid none dashed double;
border-color: grey;
BORDER-COLOR
border-color: grey;
border-color: #4c9ebd;
border-color: rgb(255,140,0);
border-color: rgba(255,140,0,0.2);
border-top: 1px solid grey; border-right: 2px solid #4c9ebd; border-bottom: 3px dashed rgb(255,140,0); border-left: 1em double rgba(255,140,0,0.2);
border-width: 1px 0px 3px 1em;
border-style: solid none dashed double;
border-color: grey #4c9ebd rgb(255,140,0) rgba(255,140,0,0.2);
BORDER-radius
border-radius: 0px
border-radius: 0.5em;
border-radius: 50%;
border-top: 1px solid grey;
border-right: 2px solid grey;
border-bottom: 3px dashed grey;
border-left: 1em double grey;
border-top-left-radius:2em;
border-top-right-radius:10px;
border-bottom-right-radius:50%;
border-bottom-left-radius:0px;
border-width: 1px 2px 3px 1em;
border-style: solid none dashed double;
border-color: grey #4c9ebd rgb(255,140,0) rgba(255,140,0,0.2);
border-radius: 2em 10px 50% 0px;
Box-shadow
box-shadow: none;
box-shadow: 10px 0px 0px grey;
box-shadow: -10px 0px 0px grey;
box-shadow: 0px 10px 0px grey;
box-shadow: 0px -10px 0px grey;
Blur
box-shadow: 5px 0px 5px grey;
box-shadow: -5px 0px 5px grey;
box-shadow: 0px 10px 5px grey;
box-shadow: 0px -10px 10px grey;
SPREAD
box-shadow: -5px -5px 0px 5px #888;
Color
box-shadow: 8px 8px 0px grey;
box-shadow: 8px 8px 0px #4c9ebd;
box-shadow: 8px 8px 0 rgb(255,140,0);
box-shadow: 8px 8px 0 rgba(255,140,0,0.3);
INSET
-moz-box-shadow: 2px 2px 2px grey inset; -webkit-box-shadow: 2px 2px 2px grey inset; box-shadow: 2px 2px 2px grey inset;
-moz-box-shadow: inset -5px -5px 5px #888; -webkit-box-shadow: inset -5px -5px 5px #888; box-shadow: inset -5px -5px 5px #888;
-moz-box-shadow: inset -5px -5px 5px 5px orange; -webkit-box-shadow: inset -5px -5px 5px 5px orange; box-shadow: inset -5px -5px 5px 5px orange;
-moz-box-shadow: inset -10px -5px rgba(0,0,0,0.3); -webkit-box-shadow: inset -10px -5px rgba(0,0,0,0.3); box-shadow: inset -10px -5px rgba(0,0,0,0.3)
Eksempler
1
.flereskygger1 {
width: 100px;
height: 100px;
text-align: center;
padding-top: 40px;
border-radius: 50%;
box-shadow: 0px 0px 10px 5px black,
40px -30px lime,
-40px -30px 50px red,
-40px 30px yellow,
40px 30px 50px blue;
}
2
.flereskygger2{
width: 100px;
height: 100px;
padding-top: 5px;
margin: 20px auto 0 auto;
text-align: center;
border: 10px solid rgb(255,140,0);
box-shadow: inset 0px 0px 35px rgba(255,140,0,0.5),
0px 0px 0px 20px rgba(255,140,0,0.5),
0px 0px 0px 40px rgba(255,140,0,0.5),
0px 0px 0px 80px rgba(255,140,0,0.5),
0px 0px 0px 105px rgba(255,140,0,0.2);
}
Shorthand properties
width, color, og style kan koges ned til en CSS-linje, eksempel:
border-width: 1px;
border-style: solid;
border-color: #000;Shorthand:
border: 1px solid #000;
