html中设置圆形头像这里的css分别表示了什么 <html> <head> <title>圆形头像

html中设置圆形头像这里的css分别表示了什么 <html> <head> <title>圆形头像,第1张

.imgtest{margin:10px 5px/*设置总的距离边距*/

overflow:hidden}/*超出部分隐藏*/

.list_ul figcaption p{/*html代码中没有*/

font-size:12px

color:#aaa

}

.imgtest figure div{ /*设置图片外面包裹的样式*/

display:inline-block/*设置行内块元素,可以设置宽高的,但是这个div又不会独占一行*/

margin:5px auto/*设置外边距*/

width:100px/*宽高一样设置成正方形*/

height:100px/*宽高一样设置成正方形*/

border-radius:100px/*设置圆角100px,设置边角为圆角*/

border:2px solid #fff/*设置div边框宽度为2,solid实线,颜色为#fff白色*/

overflow:hidden/*超出部分隐藏*/

-webkit-box-shadow:0 0 3px #ccc/*设置阴影,兼容谷歌浏览器*/

box-shadow:0 0 3px #ccc/*设置阴影*/

}

.imgtest img{width:100%/*设置图片相对于父级div的宽度*/

min-height:100%text-align:center}/*最小高度,和居中对齐样式*/

具体如果不明白可以看一下菜鸟教程,很不错的

<html>

    <head>

<title>圆形头像的制作</title>

<style type="text/css">

.imgtest{margin:10px 5px

overflow:hidden}

.list_ul figcaption p{

font-size:12px

color:#aaa

}

.imgtest figure div{

display:inline-block

margin:5px auto

width:100px

height:100px

border-radius:100px

border:2px solid #fff

overflow:hidden

-webkit-box-shadow:0 0 3px #ccc

box-shadow:0 0 3px #ccc

}

.imgtest img{width:100%

min-height:100% text-align:center}

</style>

    </head>

    <body >

        

  <div class="imgtest">

 

 <figure>

  

<div>

<img src="head.jpg" />

</div>  

</figure>

 </div>  

   

</body>

</html>

可以直接用这个在线图片转圆角图片的工具吧,直接设置一下圆角的数值,马上就能出结果。还能单独设置图片四个角是否需要变成圆角。图片背景是透明的没有白边,正好符合你要求。圆形图片生成器,照片制作圆图

圆图生成器使用步骤:

一、点击或者拖拽到上传框中,即可上传你要转换圆图的图片,直接将新图片拖入上传框即可更换图片。该功能支持jpg、png等多种常见的图片格式。

二、此时预览框中会出现刚刚上传的图片,可以任意缩放拖拽裁剪框,选择你想要截取并转换圆形图片的区域。在拖拽缩放裁剪框的过程中,可以实时预览圆图效果。

三、点击即可一键导出高清无压缩的圆形图片。

四、导出的圆形图片是.png格式的,因为只有png格式支持透明背景,而圆形图片四个角必须是镂空透明的。所以无论上传的图片是什么格式,最终会转换为png格式。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7398198.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-05
下一篇 2023-04-05

发表评论

登录后才能评论

评论列表(0条)

保存