Heim  >  Artikel  >  Web-Frontend  >  So stellen Sie ein Bild in CSS auf ein kreisförmiges Bild ein

So stellen Sie ein Bild in CSS auf ein kreisförmiges Bild ein

王林
王林Original
2021-03-01 16:28:1311347Durchsuche

So legen Sie ein kreisförmiges Bild in CSS fest: Sie können das Attribut „border-radius“ verwenden, um ein kreisförmiges Bild festzulegen, mit Code wie [border-radius:50%]. Mit der Eigenschaft border-radius können wir abgerundete Ränder zu Elementen hinzufügen.

So stellen Sie ein Bild in CSS auf ein kreisförmiges Bild ein

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

Attributeinführung:

Das Attribut „border-radius“ ermöglicht es uns, abgerundete Ränder zu Elementen hinzuzufügen.

Syntax:

border-radius: 1-4 length|% / 1-4 length|%;

Hinweis: Die Reihenfolge der vier Werte jedes Radius ist: obere linke Ecke, obere rechte Ecke, untere rechte Ecke, untere linke Ecke. Wenn die untere linke Ecke weggelassen wird, ist die obere rechte Ecke dieselbe. Wenn die untere rechte Ecke weggelassen wird, ist die obere linke Ecke dieselbe. Wenn die obere rechte Ecke weggelassen wird, ist die obere linke Ecke dieselbe.

Attributwert:

  • Länge definiert die Form der Kurve.

  • % Verwenden Sie %, um die Form der Ecken zu definieren.

Der spezifische Implementierungscode lautet wie folgt:

(Teilen von Lernvideos: CSS-Video-Tutorial)

style{
    .circle{
        width:120px; 
        height:120px; 
        border-radius:50%; 
        overflow:hidden;
    }
    .circle > img{
        width: 100%;
        height: 100%;
    }
}
<div class="circle">
    <img src="你的图片" alt="正方形的原始图片" />
</div>

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo stellen Sie ein Bild in CSS auf ein kreisförmiges Bild ein. 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