32 lines
872 B
HTML
32 lines
872 B
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
font-size: 100px;
|
|
color: gray;
|
|
width: 200px;
|
|
}
|
|
|
|
.test-stroke {
|
|
text-shadow: 100px 0 0 rgba(0, 0, 0, 0.5);
|
|
-webkit-text-stroke: 70px red;
|
|
|
|
/* Clip used to isolate the shadow */
|
|
-webkit-clip-path: inset(50px 40px 50px 140px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="test-stroke" style="paint-order: fill;">◼</div>
|
|
<div class="test-stroke" style="paint-order: fill markers;">◼</div>
|
|
<div class="test-stroke" style="paint-order: stroke;">◼</div>
|
|
<div class="test-stroke" style="paint-order: stroke markers;">◼</div>
|
|
<div class="test-stroke" style="paint-order: markers;">◼</div>
|
|
<div class="test-stroke" style="paint-order: markers stroke;">◼</div>
|
|
|
|
</body>
|
|
</html>
|