diff options
| author | MacDue <macdue@dueutil.tech> | 2022-07-02 23:07:14 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-07-04 11:12:44 +0200 |
| commit | 2ee7c440361a8cd9f7f517c29cb92431c031bebc (patch) | |
| tree | ea98f22795f3008ccf54ca18f60adda5a7ffea85 | |
| parent | 61b447e53f0bbfa06a701686843439e5cc3625b5 (diff) | |
| download | serenity-2ee7c440361a8cd9f7f517c29cb92431c031bebc.zip | |
Base: Add some background-clip + border-radius HTML examples
| -rw-r--r-- | Base/res/html/misc/border-radius.html | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/Base/res/html/misc/border-radius.html b/Base/res/html/misc/border-radius.html index f2b316dc40..63fe0c8c2f 100644 --- a/Base/res/html/misc/border-radius.html +++ b/Base/res/html/misc/border-radius.html @@ -203,6 +203,26 @@ width: 150px; height: 100px; } + + .solid-color { + background: red content-box; + } + + .image { + background: center / contain url(car.png) content-box; + } + + .image-layers { + background: center / contain url(car.png) content-box, center / contain url(old-computer.png); + } + + .box-background-clip { + width: 100px; + height: 100px; + border: 10px solid black; + border-radius: 50px; + padding: 10px; + } </style> </head> @@ -279,6 +299,18 @@ <br> <br> + <p>These use a border-radius + a background clip (the radius of the inner background should shrink)</p> + <em>Solid color</em> + <div class="box-background-clip solid-color"></div> + <br> + <em>Background image</em> + <div class="box-background-clip image"></div> + <br> + <em>Background image layers</em> + <div class="box-background-clip image-layers"></div> + <br> + <br> + <p>The boxes are 50x50px</p> <em>All round 10px</em> <div class="box box-1"></div> |