mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 21:57:43 +00:00
Base: Add background-image + border-radius HTML examples
This commit is contained in:
parent
4e8e1492f9
commit
51899751d7
2 changed files with 35 additions and 0 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue