RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 00:47:45 +00:00
Code Issues Activity Actions

Base: Add some background-clip + border-radius HTML examples

Browse source
This commit is contained in:
MacDue 2022-07-02 23:07:14 +01:00 • committed by Andreas Kling
parent 61b447e53f
commit 2ee7c44036
1 changed files with 32 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

32
Base/res/html/misc/border-radius.html
View file

@ -203,6 +203,26 @@
width: 150px; width: 150px;
height: 100px; 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> </style>
</head> </head>
@ -279,6 +299,18 @@
<br> <br>
<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> <p>The boxes are 50x50px</p>
<em>All round 10px</em> <em>All round 10px</em>
<div class="box box-1"></div> <div class="box box-1"></div>