38 lines
1.1 KiB
HTML
38 lines
1.1 KiB
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 stroke */
|
|
-webkit-clip-path: inset(50px 40px 50px 140px);
|
|
}
|
|
.bg-color-gray {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
/* Clip used to isolate a part of the shadow */
|
|
-webkit-clip-path: inset(50px 40px 50px 140px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="bg-color-gray" style="paint-order: fill;">◼</div>
|
|
<div class="bg-color-gray" style="paint-order: fill markers;">◼</div>
|
|
<div class="bg-color-gray" style="paint-order: stroke;">◼</div>
|
|
<div class="bg-color-gray" style="paint-order: stroke markers;">◼</div>
|
|
<div class="bg-color-gray" style="paint-order: markers;">◼</div>
|
|
<div class="bg-color-gray" style="paint-order: markers stroke;">◼</div>
|
|
|
|
</body>
|
|
</html>
|