形状精美的头像 - 仅 CSS - 分步教程

有关如何创建形状精美的头像的教程。

超文本标记语言

对于 HTML，我们只需要一个类为“avatar”的 div 元素。

<div class="avatar"></div>

CSS

对于 CSS，我们将仅设置“avatar”类的样式。

我们将宽度和高度设置为 150x100 像素，边框设置为 5 像素纯棕色。

我将设置一张在谷歌上找到的随机图像作为背景图像。

现在，我将图像放置在中心，并通过将背景位置属性设置为中心并将背景大小设置为覆盖来覆盖整个区域。

为了创建这个漂亮的形状，我将边框半径设置为 20% / 50%，这意味着 20% 将应用于水平半径，50% 将应用于垂直半径。

.avatar {
    width: 150px;
    height: 100px;
    border: 5px solid #AA771C;
    background-image: url('https://media.istockphoto.com/photos/beautiful-afro-girl-with-curly-hairstyle-picture-id1381221247?b=1&k=20&m=1381221247&s=170667a&w=0&h=4bt0RFmAffRSqrKa2N2vJAFbWgmbRg7x-0ziJaRtpxE=');
    background-size: cover;
    background-position: center;
    border-radius: 20% / 50%;
}

就是这样。