Heim  >  Artikel  >  Web-Frontend  >  So erreichen Sie eine fächerförmige Darstellung von Bildern in CSS3

So erreichen Sie eine fächerförmige Darstellung von Bildern in CSS3

WBOY
WBOYOriginal
2021-12-16 17:13:432522Durchsuche

Methode: 1. Verwenden Sie das Attribut „border-radius“, um das quadratische Element in eine Fächerform zu bringen. Die Syntax lautet „border-radius: Square width value 0 0;“ 2. Verwenden Sie das Attribut „element {background-image Die Anweisung „:url (Bildpfad) ;}“ kann das Hintergrundbild für das fächerförmige Element festlegen.

So erreichen Sie eine fächerförmige Darstellung von Bildern in CSS3

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So realisieren Sie eine fächerförmige Anzeige von Bildern in CSS3

In CSS können Sie das Attribut „border-radius“ und das Attribut „background-image“ verwenden, um eine fächerförmige Anzeige von Bildern zu realisieren.

Das Attribut „border-radius“ kann ein quadratisches Element auf eine Fächerform festlegen und dann das Element „background-image“ verwenden, um ein Hintergrundbild für das fächerförmige Element festzulegen.

Das Beispiel sieht wie folgt aus:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  div{
 border-radius:200px 0 0;
  width: 200px;
  height: 200px;
  background-image:url(1118.02.png);
}
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Ausgabeergebnis:

So erreichen Sie eine fächerförmige Darstellung von Bildern in CSS3

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine fächerförmige Darstellung von Bildern in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn