零星网络

技术&资讯
网站超市

需要前后台演示请留言,或QQ:150623477联系站长。

本成品是基于ASP+Access开发的网站内容管理系统,提供了简介类模块,新闻类模块,产品类模块,图片类模块,下载类模块
· 适用性:充分考虑公司企业的实际需要,确保功能上较强的实用性。
· 易用性:用户界面简洁、美观、友好,易于用户操作和使用,操作人员只需简单学习即可掌握。
· 安全性:安全可靠的权限划分,既考虑信息的共享,又注意信息的保护与隔离。

DIV+CSS 您的当前位置:首页 > 技术&资讯 > DIV+CSS

IE7/IE8浏览器纯CSS实现圆角效果实例页面

发布时间:2016-07-26  浏览次数:  分享到:

实现原理:
IE9+使用border-radius:50%, IE7,IE8使用border模拟。

我们平常使用border-style一般都是solid实线,其他常用的还有dashed以及dotted,我们这里的主角就是dotted点,在IE浏览器下,dotted点是被渲染成正圆的,Chrome浏览器则是正方形。

于是,我们就可以利用这个圆实现我们想要的圆角效果。我们给一个父级元素,同尺寸,overflow:hidden,只看见左上角那个圆,就可以实现我们想要的正圆效果了。

其他说明
此方法并不适用于IE6浏览器,因为IE6浏览器下dotted会按照dashed虚线进行渲染,不是个圆。

 

复制代码
  1. .box {   
  2.     width150pxheight150px;   
  3.     line-height150px;   
  4.     positionrelative;   
  5.     overflowhidden;   
  6. }   
  7. .radius {   
  8.     positionabsolute;   
  9.     width: 100%; height: 100%;   
  10.     border-radius: 50%;   
  11.     border149px dotted;   
  12.     /* IE7,IE8圆尺寸要小1像素同时有1像素偏移 */  
  13.     margin: 0 0 1px 1px;   
  14.     border-width: 0vw;   
  15.     margin: 0vw;   
  16.     color#cd0000;   
  17.     background-color: currentColor;   
  18. }   
  19. .text {   
  20.     positionrelative;   
  21.     color#fff;   
  22.     text-aligncenter;   
  23.     font-size24px;   
  24. }  
复制代码
  1. <div class="box">  
  2.     <i class="radius">i>  
  3.     <p class="text">美女p>  
  4. div>  

 

相关评论

    评论加载中...
    评论者:     验证码:
        

首页|网站超市|业界|营销|优化|HTML|JS|JQUERY|DIV+CSS|编程|运营|设计排版|创业|访谈

Copyright © 2006-2015 Power by 零星设计. 联系QQ:150623477
合作共赢、快速高效、优质的网站建设提供商

  • ●在线咨询点击这里给我发消息
  • ●在线咨询点击这里给我发消息
  • ●在线咨询点击这里给我发消息
  • 业务电话正在通话中…
  • 09:00AM-22:00PM
  • 高效优质的网站建设提供商
  • 加入收藏