Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>Outline with translucent color, will-change:transform and negative-z index child</title>
<link rel="match" href="translucent-outline-ref.html">
<style>div { will-change: transform; }</style>
There should be a square in uniform pale green color.
<div style="position: relative; top: 25px; left: 25px;
width: 50px; height: 50px;
outline: 25px solid rgba(0, 128, 0, 0.5);
background: rgba(0, 128, 0, 0.5)">
<div style="position: absolute; width: 10px; height: 10px; z-index: -1"></div>
</div>