40 lines
1.0 KiB
HTML
40 lines
1.0 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
font-size: 100px;
|
|
color: gray;
|
|
width: 100px;
|
|
}
|
|
|
|
.test-stroke {
|
|
text-shadow: none;
|
|
-webkit-text-stroke: 60px red;
|
|
|
|
/* Clip used to isolate the stroke */
|
|
-webkit-clip-path: inset(55px 35px 55px 35px);
|
|
}
|
|
|
|
.fill-grey {
|
|
text-shadow: none;
|
|
|
|
/* Clip used to isolate the stroke */
|
|
-webkit-clip-path: inset(55px 35px 55px 35px);
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="test-stroke" style="paint-order: fill;">◼</div>
|
|
<div class="test-stroke" style="paint-order: fill markers;">◼</div>
|
|
<div class="fill-grey" style="paint-order: stroke;">◼</div>
|
|
<div class="fill-grey" style="paint-order: stroke markers;">◼</div>
|
|
<div class="test-stroke" style="paint-order: markers;">◼</div>
|
|
<div class="fill-grey" style="paint-order: markers stroke;">◼</div>
|
|
|
|
</body>
|
|
</html>
|