RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 21:57:43 +00:00
Code Issues Activity Actions

Base: Add background-image + border-radius HTML examples

Browse source
This commit is contained in:
MacDue 2022-06-15 21:26:40 +01:00 • committed by Linus Groh
parent 4e8e1492f9
commit 51899751d7
2 changed files with 35 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -180,6 +180,29 @@
border: 1px solid black;
background-color: transparent;
}
.nut {
width: 220px;
height: 180px;
background-size: 220px 180px;
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
background-image: url('old-computer.png');
}
.screenshot {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url("serenity-screenshot.png");
}
.rounded-image {
background-image: url("90s-bg.png");
background-repeat: repeat;
border-radius: 20px;
width: 150px;
height: 100px;
}
</style>
</head>
@ -239,6 +262,18 @@
<br>
<br>
<p>These boxes have (rectangular) background images, that are clipped by the border radius</p>
<em>In a nutshell</em>
<div class="nut"></div>
<br>
<em>In a circle</em>
<div class="screenshot"></div>
<br>
<em>Rounded</em>
<div class="rounded-image"></div>
<br>
<br>
<p>The boxes are 50x50px</p>
<em>All round 10px</em>
<div class="box box-1"></div>