手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

HTML-如何用代码做出圆形头像的样式

时间:2024-10-12 02:16:58

1、打开代码软件,然后做出一个div标签,中间包含一个图片标签如图

HTML-如何用代码做出圆形头像的样式

2、将文件保存并且和准备的图片放在一个文件夹内,如图所示

HTML-如何用代码做出圆形头像的样式

3、然后继续在代码软件中,将刚才的图片位置添加到Img标签中,如图所示,必须将图片的所有命名都填写上

HTML-如何用代码做出圆形头像的样式

4、这时候保存代码,然后观看效果是显示图片原来大小尺寸的

HTML-如何用代码做出圆形头像的样式

5、在div中可以设置div宽高属性,然后对里面的子集img进行宽度的设置,高度会自动变

HTML-如何用代码做出圆形头像的样式

6、这样我们看到的就是我们设置的大小尺寸了

HTML-如何用代码做出圆形头像的样式

7、我们看到的头像很多都是圆角的,我们也可以用代码实现,在div中将边缘化变成圆角的就可以了,如图所示,然后再设置个溢出隐藏

HTML-如何用代码做出圆形头像的样式

8、这样我们看到的头像就是圆形的了,是不是很简单。

HTML-如何用代码做出圆形头像的样式
HTML-如何用代码做出圆形头像的样式
© 手抄报圈