How to set a picture to a circular picture in css

How to set a circular picture in css: You can use the border-radius attribute to set a circular picture, with code such as [border-radius:50%]. The border-radius property allows us to add rounded borders to elements.

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

Attribute introduction:

The border-radius attribute allows us to add a rounded border to an element.

Syntax:

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

Note: The order of the four values ​​​​for each radius is: upper left corner, upper right corner, lower right corner, lower left corner. If the lower left corner is omitted, the upper right corner is the same. If the lower right corner is omitted, the upper left corner is the same. If the upper right corner is omitted, the upper left corner is the same.

Attribute value:

• length defines the shape of the curve.​

• % Use % to define the shape of the corners.

The specific implementation code is as follows:

(Learning video sharing: 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="/static/imghwm/default1.png"  data-src="你的图片"  class="lazy"   alt="正方形的原始图片" />
</div>

Related recommendations: CSStutorial

The above is the detailed content of How to set a picture to a circular picture in css. For more information, please follow other related articles on the PHP Chinese website!