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


    转载  原文:http://www.divcss5.com/wenji/w732.shtml

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

    二、使用布局技术   -   TOP

    使用CSS3 圆角技术实现。

    使用CSS3样式单词:border-radius

    语法:

    1. div{border-radius:5px} 

    对图片设置圆角样式:

    1. .abc img{border-radius:5px} 

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

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

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

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

    1、HTML源代码完整代码:

    1. <!DOCTYPE html
    2. <html
    3. <head
    4. <meta charset="utf-8" /> 
    5. <title>图片圆形布局 在线演示 DIVCSS5</title
    6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
    7. <!-- www.divcss5.com --> 
    8. </head
    9. <body
    10. <div id="divcss5"><img src="images/1.jpg" /></div
    11. </body
    12. </html

    2、对应CSS代码:

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

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

    3、浏览器效果截图

  • 相关阅读:
    sql中table用法
    sql group by
    C#excel导入
    手写简单JDBC
    连接池+事务
    mysql+jdbc
    mysql(多表)
    jsp标签+jstl
    页面跳转+路径问题
    ajax 动态获取数据库中的值
  • 原文地址:https://www.cnblogs.com/wenjie/p/5534583.html
Copyright © 2020-2023  润新知