mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 00:57:45 +00:00
LibWeb: Implement the CSS outline-offset
property
This allows you to push the outline a certain distance away from the border (or inside it, if the offset is negative).
This commit is contained in:
parent
fe7e797483
commit
73fa58da34
8 changed files with 70 additions and 7 deletions
|
@ -6,6 +6,7 @@
|
|||
p {
|
||||
padding: 5px;
|
||||
border: 2px solid black;
|
||||
margin: 1em;
|
||||
}
|
||||
.outline-default {
|
||||
outline: auto;
|
||||
|
@ -21,6 +22,14 @@
|
|||
color: saddlebrown;
|
||||
outline: 5px dotted currentcolor;
|
||||
}
|
||||
.outline-offset {
|
||||
outline: 5px solid blue;
|
||||
outline-offset: 0.5em;
|
||||
}
|
||||
.outline-inset {
|
||||
outline: 1px solid red;
|
||||
outline-offset: -10em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -29,5 +38,7 @@
|
|||
<p class="outline-1">I have an outline!</p>
|
||||
<p class="outline-2">I have an outline and a radius!</p>
|
||||
<p class="outline-currentcolor">My outline is dotted and brown!</p>
|
||||
<p class="outline-offset">My outline is blue and away from my border!</p>
|
||||
<p class="outline-inset">My outline is a very thin red line in the middle of this box!</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue