EXAMPLE
Run 
<!DOCTYPE html>

<head>
	<title>Background-clip</title>
	<style type="text/CSS">
		p {
		  border: .8em darkviolet;
		  border-style: dotted double;
		  margin: 1em 0;
		  padding: 1.4em;
		  background: linear-gradient(60deg, red, yellow, red, yellow, red);
		  font: 900 1.2em sans-serif;
		  text-decoration: underline;
		}
		
		.border-box { background-clip: border-box; }
		.padding-box { background-clip: padding-box; }
		.content-box { background-clip: content-box; }
		
		.text {
		  background-clip: text;
		  -webkit-background-clip: text;
		  color: rgba(0,0,0,.2);
		}
	</style>
</head>

<body>
	<p class="border-box">The background extends behind the border.</p>
	<p class="padding-box">The background extends to the inside edge of the border.</p>
	<p class="content-box">The background extends only to the edge of the content box.</p>
	<p class="text">The background is clipped to the foreground text.</p>
</body>

</html>