CSS multiple outlines with negative outline-offset - html

Question

I got with image as a background, and want to get effect of multiple inner outlines.
Outlines should be solid white 2px, but in different position - say -4px, -8px, -12px.
Goal is to get more than 2 outlines.
I know i can make box-shadow and outline to get double outilne, but noticed that i cannot attach to div 3 classes with different outline-offset - div have applied only last of class.
My code:
<div class="imgfield effect1 effect2 effect3"> </div>
and example css:
.imgfield { background: url(someimage.jpg); ... width, height etc. }
.effect1 { outline: yellow 2px solid; outline-offset: -4px; }
.effect2 { outline: red 2px solid; outline-offset: -8px; }
.effect3 { outline: blue 2px solid; outline-offset: -12px; }
In this example there will be only blue inner outline but now red niether yellow. How to workaround this?
-----------edit-----------------
All answers are good. I must admit i try handling after and before but i'm not enough familiar with it. Box-sizing: border-box was also important.

Answer 1

to complete #Mr.Alien demo/answer , i would use border's pseudo for a better compatibility.
.effect {
height: 200px;
width: 200px;
outline: 1px solid #000;
position:relative;/* pick as reference for pseudo absolute */
-moz-box-sizing:border-box; /* keep box within size given */
box-sizing:border-box;
}
/* size pseudo within from coordonates */
.effect:before {
content:"";
top:2px;
left:2px;
right:2px;
bottom:2px;
border: green 2px solid;
position: absolute;
}
.effect:after {
content:"";
top:6px;
left:6px;
right:6px;
bottom:6px;
border: red 2px solid;
position: absolute;
}
DEMO

Answer 2

How about using pseudo elements for this? Here, I am using a single class with a single element, but am positioning the pseudo elements i.e :before and :after using position: absolute;.
Demo
You can surely play with z-index if you have any issue with the element overlapping.
.effect {
height: 200px;
width: 200px;
outline: 1px solid #000;
}
.effect:before {
content: "";
height: 200px;
width: 200px;
outline: green 2px solid;
outline-offset: -4px;
display: block;
position: absolute;
}
.effect:after {
content: "";
display: block;
height: 200px;
width: 200px;
outline: red 2px solid;
outline-offset: -8px;
position: absolute;
}