134 lines
2.6 KiB
HTML
134 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
div {
|
|
margin: 2px 20px 10px 20px;
|
|
padding: 2px 10px;
|
|
outline-width: 8px;
|
|
outline-color: rgba(0, 0, 255, 0.3);
|
|
display: inline-block;
|
|
}
|
|
|
|
div.solid {
|
|
outline-style: solid;
|
|
}
|
|
|
|
div.auto {
|
|
outline-style: auto;
|
|
}
|
|
|
|
div.dotted {
|
|
outline-style: dotted;
|
|
}
|
|
|
|
div.dashed {
|
|
outline-style: dashed;
|
|
}
|
|
|
|
div.double {
|
|
outline-style: double;
|
|
}
|
|
|
|
div.ridge {
|
|
outline-style: ridge;
|
|
}
|
|
|
|
div.groove {
|
|
outline-style: groove;
|
|
}
|
|
|
|
div.inset {
|
|
outline-style: inset;
|
|
}
|
|
|
|
div.outset {
|
|
outline-style: outset;
|
|
}
|
|
</style>
|
|
|
|
The outlines should be a consistent color all the way around the outline. There should be no dark pixels or blocks at corners.<br><br>
|
|
|
|
<div class="solid"></div>
|
|
<div class="solid"></div>
|
|
<div class="solid"></div>
|
|
<div class="solid"></div>
|
|
<div class="solid"></div>
|
|
<div class="solid"></div>
|
|
<div class="solid"></div>
|
|
<div class="solid"></div>
|
|
solid<br><br>
|
|
|
|
<div class="double"></div>
|
|
<div class="double"></div>
|
|
<div class="double"></div>
|
|
<div class="double"></div>
|
|
<div class="double"></div>
|
|
<div class="double"></div>
|
|
<div class="double"></div>
|
|
<div class="double"></div>
|
|
double<br><br>
|
|
|
|
<div class="dotted"></div>
|
|
<div class="dotted"></div>
|
|
<div class="dotted"></div>
|
|
<div class="dotted"></div>
|
|
<div class="dotted"></div>
|
|
<div class="dotted"></div>
|
|
<div class="dotted"></div>
|
|
<div class="dotted"></div>
|
|
dotted<br><br>
|
|
|
|
<div class="dashed"></div>
|
|
<div class="dashed"></div>
|
|
<div class="dashed"></div>
|
|
<div class="dashed"></div>
|
|
<div class="dashed"></div>
|
|
<div class="dashed"></div>
|
|
<div class="dashed"></div>
|
|
<div class="dashed"></div>
|
|
dashed<br><br>
|
|
|
|
<div class="ridge"></div>
|
|
<div class="ridge"></div>
|
|
<div class="ridge"></div>
|
|
<div class="ridge"></div>
|
|
<div class="ridge"></div>
|
|
<div class="ridge"></div>
|
|
<div class="ridge"></div>
|
|
<div class="ridge"></div>
|
|
ridge<br><br>
|
|
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
groove<br><br>
|
|
|
|
<div class="inset"></div>
|
|
<div class="inset"></div>
|
|
<div class="inset"></div>
|
|
<div class="inset"></div>
|
|
<div class="inset"></div>
|
|
<div class="inset"></div>
|
|
<div class="inset"></div>
|
|
<div class="inset"></div>
|
|
inset<br><br>
|
|
|
|
<div class="outset"></div>
|
|
<div class="outset"></div>
|
|
<div class="outset"></div>
|
|
<div class="outset"></div>
|
|
<div class="outset"></div>
|
|
<div class="outset"></div>
|
|
<div class="outset"></div>
|
|
<div class="outset"></div>
|
|
outset
|
|
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText(true);
|
|
</script>
|