一、图片实现圆形条件

  原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。

  二、使用布局技术

  使用CSS3 圆角技术实现。

  使用CSS3样式单词:border-radius

  语法:

  div{border-radius:5px}

  对图片设置圆角样式:

  .abc img{border-radius:5px}

  设置class=”abc”对象图片四个角圆角为5px

  三、CSS圆角实现图片圆形实例

  首先一张正方形图片,放入一个DIV盒子内,通过对盒子内图片设置border-radius:50%实现圆形效果。

  本案例在DIVCSS5初始化模板基础上完成。

  1、HTML源代码完整代码:


复制代码代码如下:  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8" />
  <title>图片圆形布局 在线演示 DIVCSS5</title>
  <link href="images/style.css" rel="stylesheet" type="text/css" />
  <!-- https://www.jb51.net/-->
  </head>
  <body>
  <div id="divcss5"><img src="/UploadFiles/2021-03-30/1.jpg">  </body>
  </html>

  2、对应CSS代码:


复制代码代码如下:  #divcss5{ margin:10px auto}
  #divcss5 img{ border-radius:50%}

  命名盒子“id=divcss5”盒子居中,同时上下外间距为10px;,然后设置对象盒子里img图片圆角50%

  3、浏览器效果截图

  

css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

标签:
css3,图片布局,图片圆形,

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。