/*十有三博客*/
  • 首页
  • 关于本站
  • 网站地图
  • RSS订阅

HTML小技巧:使用CSS3属性绘制圆形元素和图片

2016-03-17 十有三 2 浏览:3万+ Web前端 HTML | CSS

在印象中HTML的元素都是正正方方的。但是我们可以利用CSS3的border-radius属性将元素的边框圆角化,甚至可以实现圆形的绘制,以此为基础还可以对图片进行操作,将图片圆形化。

其实要利用CSS绘制圆形只要设置border-radius属性为50%即可,主要的原理就是利用此属性将元素的边框圆角化,控制圆角化的角度形成一个圆形。

将方形div元素变成圆形

首先我们绘制出一个长宽都为100px,且背景色为蓝色的正方形div元素:

<div style="width:100px;height:100px;background-color:#0000ff;"></div>

最终形成结果如下图:

正方形div元素

然后将这个div元素的border-radius样式设置为50%:

<div style="width:100px;height:100px;background-color:#0000ff;border-radius:50%;"></div>

最终结果:

利用CSS3的border-radius绘制圆形div

这样就成功绘制了一个圆形的div元素,如果原本的div是长方形,设置50%的圆角边框就会形成椭圆形。另外其他的元素标签页可以使用border-radius属性。

将方形图片变成圆形

掌握了上面的要点,我们可以加以利用,将这个技巧运用到图片元素上,这样就可以将原本是方形的图片变成圆形。

正方形原图:

正方形原图

对img元素设置圆角边框,使其变成圆形图片:

<img src="img-square.png" style="border-radius:50%;"/>

变成圆形图片:

将方形图片变成圆形

演示中图片本身是正方向,如果长方形图片就会变成椭圆。


PS:需要注意浏览器兼容的问题,特别是IE8(包含)以下版本的浏览器是不支持CSS3的border-radius属性的,所以遇到浏览器不兼容的情况就会被打回原形,变成原本的方形。

关于更多border-radius属性的资料,建议看下w3c的文档,文档中还有详细演示链接。 

在线演示:css-draw-circle.html

案例下载:DOWNLOAD

演示页面中还额外展示了不同的圆角样式,有兴趣的朋友可以看下:

其他圆角化效果


作者:十有三

出处:https://shiyousan.com/post/635938243885164067

版权声明:本文采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。欢迎转载本文,转载请声明出处或保留此段声明。


  • 上一篇: 简单处理VS2013无法启动 IIS Express Web的问题
  • 下一篇: limarquee轮番插件图片略微抖动的问题

相关文章
  • KindEditor禁止用户输入a标签链接以及只允许指定HTML标签输入的方法和技巧
  • 什么是CSS Sprites技术?
  • HTML使用相对路径获取各级目录下文件
  • JavaScript isNaN() 函数
  • 火狐浏览器在URL中不兼容反斜杠"\"作为路径分隔
  • CKFinder 3无法删除文件和文件夹出现提示:You cannot delete files in DEMO mode

文章分类

.NET技术 123 数据库 24 Web前端 21 网站建设运维 37 操作系统与应用 66 程序猿日常 11 开发工具 12 其他随笔 13

文章标签

ASP.NET ASP.NET MVC C# CSS HTML IIS Javascript Linux MongoDB MySql SQL SQL Server Visual Studio Windows系统 版本控制系统 插件工具 服务器 搞笑娱乐 好文分享 软件应用 生活知识 手机问题 随笔 网络知识 网站设计优化 网站维护 养生保健 异常处理 硬件设备 游戏攻略

热门文章

  • IIS8如何安装和使用URL重写工具-URL Rewrite
  • 林蛋大与楚中天,朱肚皮与朱月坡
  • 解决IE11安装升级失败和在安装前需要更新的问题
  • Windows Server 2012无法安装 .NET3.5-安装角色或功能失败,找不到源文件
  • VS重构重命名的快捷键

推荐文章

  • 使用JavaScript ceil()函数计算分页页码总数
  • 骑马与砍杀 战团 秘籍/作弊指令大全/角色导入导出作弊法
  • 在唯一密钥属性“fileExtension”设置为“.”时,无法添加类型为“mimeMap”的重复集合项
  • asp.net mvc 使用XmlWriter输出XML未调用Close方法造成错误
  • 织梦dedecms直接通过数据库修改网站配置(系统基本参数)的注意事项

友情链接

  • Passingwind的博客
  • 码友网

知识共享许可协议 CC BY-SA 4.0本站作品采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。
闽ICP备15003702号
闽公网安备 35020302035102号