广告
返回顶部
首页 > 资讯 > 前端开发 > html >如何用CSS将正方形图片显示为圆形图片布局
  • 897
分享到

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

css3 2022-10-19 06:10:52 897人浏览 薄情痞子
摘要

本篇内容主要讲解“ 如何用CSS将正方形图片显示为圆形图片布局”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ 如何用CSS将正方形图片显示为圆形图片布局”吧! 

本篇内容主要讲解“ 如何用CSS将正方形图片显示为圆形图片布局”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ 如何用CSS将正方形图片显示为圆形图片布局”吧!

  一、图片实现圆形条件

  原本不是圆形图片,通过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.yisu.com/-->
  </head>
  <body>
  <div id="divcss5"><img src="images/1.jpg" /></div>
  </body>
  </html>

  2、对应CSS代码:

代码如下:

  #divcss5{ margin:10px auto}
  #divcss5 img{ border-radius:50%}

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

  3、浏览器效果截图

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

到此,相信大家对“ 如何用CSS将正方形图片显示为圆形图片布局”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: 如何用CSS将正方形图片显示为圆形图片布局

本文链接: https://www.lsjlt.com/news/76063.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何用CSS将正方形图片显示为圆形图片布局
    本篇内容主要讲解“ 如何用CSS将正方形图片显示为圆形图片布局”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ 如何用CSS将正方形图片显示为圆形图片布局”吧! ...
    99+
    2022-10-19
    css3
  • php如何将图片设置为圆形图片
    这篇文章主要讲解了“php如何将图片设置为圆形图片”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php如何将图片设置为圆形图片”吧!php将图片设置为圆形图片的方法:1、创建一个PHP示例文...
    99+
    2023-06-25
  • css如何将图片变成圆角矩形
    在css中将图片变成圆角矩形的方法:1.添加图片;2.使用border-radius属性设置图片为圆角矩形;在css中将图片变成圆角矩形的方法首先,在页面中添加一张图片;<!DOCTYPE html><html&...
    99+
    2022-10-18
    css
  • Android中使用Bitmap类将矩形图片转为圆形的方法
    一般要做正圆形图片,只能是正方形的基础上才能实现,否则就变成椭圆了,下面说说如何使长方形的图片生成正圆形图片 废话不多说,没图没真相,先上图吧: 原图: 变成正圆后: ...
    99+
    2022-06-06
    矩形图片 方法 图片 bitmap Android
  • Android应用中如何将头像图片变圆形
    本篇文章为大家展示了Android应用中如何将头像图片变圆形,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。实现步骤1.自定义一个转换工具类package com.common.base.util;i...
    99+
    2023-05-31
    android roi
  • 如何使用HTML和CSS实现瀑布流图片展示布局
    瀑布流布局是一种常用于图片展示的布局方式,具有美观和灵活的特点。它能够根据图片的尺寸自动排列,使整个页面看起来更加有趣和吸引人。本文将介绍如何使用HTML和CSS来实现瀑布流图片展示布局,并提供具体的代码示例。第一步:创建HTML结构首先,...
    99+
    2023-10-21
    CSS html 瀑布流布局
  • 如何使用HTML和CSS创建一个响应式图片展示布局
    在现代Web设计中,响应式布局已经成为一种标配,因为越来越多的人使用不同尺寸和分辨率的设备浏览网页。在本文中,我们将介绍如何使用HTML和CSS来创建一个响应式图片展示布局。首先,我们需要一个HTML文件来构建页面结构。在该文件中,我们使用...
    99+
    2023-10-21
    响应式 CSS html
  • 如何使用HTML和CSS创建一个响应式图片展示墙布局
    HTML和CSS是前端开发中常用的技术,可以用来创建各种布局效果。在本文中,我们将学习如何使用HTML和CSS来创建一个响应式的图片展示墙布局,让图片在不同设备上都能够自适应显示。首先,我们需要创建一个HTML文件,命名为index.htm...
    99+
    2023-10-21
    响应式 CSS html
  • 如何使用HTML和CSS创建一个响应式图片画廊展示布局
    在当今互联网时代,图片画廊展示是网页设计中常见的布局,可以展示各类图片和图像作品。为了让用户能够在不同设备上获得良好的浏览体验,响应式设计变得越来越重要。本文将介绍如何使用HTML和CSS创建一个响应式图片画廊展示布局,并提供具体的代码示例...
    99+
    2023-10-21
    图片 布局 画廊 HTML: CSS:
  • 如何使用HTML和CSS创建一个响应式图片集锦展示布局
    在网页设计中,展示图片集锦是一种常见的需求。为了提供更好的用户体验,我们希望这些图片在不同设备上都能以适当的方式展示,而不仅仅是简单地缩放。这就需要设计一个响应式的图片集锦展示布局。在本文中,我们将介绍如何使用HTML和CSS来创建这样一个...
    99+
    2023-10-21
    响应式 CSS html
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作