Erstellen eines perforierten Behälters: eine Schritt-für-Schritt-Anleitung
Ich erstelle ein Tutorial zur ersten Verwendung meiner App.
Es sieht also aus wie ein Popup mit Informationen zur Verwendung der Schaltfläche
Im Tutorial möchte ich, dass der Hintergrund dunkler wird und ein Kreis erscheint, der um die Schaltfläche verläuft und einen Tutorialtext enthält
Also möchte ich einen Behälter mit einem runden Loch machen
Hier ist ein einfaches Beispiel:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.dark{
height: 100%;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.377);
}
.circle{
height: 150px;
width: 150px;
border-radius: 50%;
background-color: white;
}
</style>
</head>
<body>
<div class="dark">
<p style="color:white;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size: 23px;">This button is used to delete your file.</p>
<div class="circle"></div>
</div>
<button style="margin:200px;">The Button</button>
</body>
Aber ich möchte, dass das Loch im Knopf ist
