前端在线资源
本文全文转载需购买版权(500?)，摘要引流则免费，具体
一、关于IE7, IE8不支持CSS3 border-radius
CSS3 border-radius可以轻易实现圆还有圆角效果，然而，需要IE9+浏览器才行。移动端自然不成问题，但是众多（尤其面向C侧）PC页面是至少需要兼容IE8的，那有没有什么办法可以让IE7, IE8也支持圆角呢？
很久很久以前介绍过一个名为PIE的东西可以实现IE7,IE8的圆角，是10年7月份写的一篇“”（本文还有其他很多圆角方法介绍）。
其原理是利用的IE私有的behavior，本质上还是JS代码。
这里，给大家介绍一个使用纯CSS实现IE7,IE8浏览器正圆角的例子。
二、纯CSS实现IE7,IE8圆角
我们直接看demo，您可以狠狠地点击这里：
结果，IE7浏览器下：
IE8浏览器下：
有小伙伴评论反映IE8下不是正圆，然后，今天我特意打开10年前还是XP系统的笔记本，使用原生的IE8浏览器看了下，除了边缘糙了点以外，还是正圆，如下截图：
因此，反映IE8圆角不是正圆的小伙伴，可否提供更多的信息。例如，比方说操作系统，或者是否在IEtester类似软件中测试的等。
全兼容，效果棒棒哒！
实现原理：
IE9+使用border-radius:50%, IE7,IE8使用border模拟。
我们平常使用border-style一般都是solid实线，其他常用的还有dashed以及dotted，我们这里的主角就是dotted点，在IE浏览器下，dotted点是被渲染成正圆的，Chrome浏览器则是正方形。
上面demo，如果我们去掉父级的overflow，IE浏览器下就会这样：
同等条件下的Chrome则是方点：
于是，我们就可以利用这个圆实现我们想要的圆角效果。我们给一个父级元素，同尺寸，overflow:hidden，只看见左上角那个圆，就可以实现我们想要的正圆效果了。
相关CSS代码如下：
width: 150 height: 150
/* 值显示左上角那个圆点 */
width: 100%; height: 100%;
border: 149
/* IE7,IE8圆尺寸要小1像素同时有1像素偏移 */
margin: 0 0 1px 1
color: #cd0000;
是不是很好理解。完整CSS和HTML代码。
此方法并不适用于IE6浏览器，因为IE6浏览器下dotted会按照dashed虚线进行渲染，不是个圆。
三、此方法的不足
本文介绍的方法可以轻松实现一个圆效果，而且可以无缝全兼容。但是，不足在于只能实现个圆，如果你想实现任意大小的圆角效果，怎么说呢？理论上也是可以实现的，但是，需要很多个元素进行拼接。就是dotted边框模拟小圆角，直线部分需要矩形进行拼接。但是，显然成本就很高了，在我看来，为了注定要淘汰的IE7，IE8浏览器这么折腾，是不划算的。
四、结束语
其实，有些字符放到足够大，也是个正圆。但是呢，字符的问题在于，受字体和系统的影响相当大，很难像素级精确定位。因此，不如这里的border模拟效果好。
母校进入了看海模式，我不开心了！
你以为我是心疼被淹了吗？
不是，你想多了！我只是生气，为什么我呆的4年时间就没有被淹呢！！？你可知道，东九那条湖里养了多少大鱼吗？这一发大水，这鱼肯定往外跑啊，我就可以下水抓鱼顶生活费了呀！为什么这么好的事情我没遇到，没有天理啊！不开心了！
我抓鱼真的很厉害，为了证明不忽悠大家，特地从人人网找了张大学的图：
本文为原创文章，尊重辛勤劳动，可以免费摘要、推荐或聚合，但完整转载需付费购买版权，详见
本文地址：
相关文章 (0.710) (0.710) (0.516) (0.516) (0.516) (0.516) (0.516) (0.516) (0.516) (0.516) (RANDOM - 0.194)
标签： , , , ,
赞助商广告()：
如果你月薪不足20K，不妨
这里有最全的web前端开发视频
如果你有1~3年前端开发经验，不妨
想找个师兄入门前端？不妨
热门总排行登录到叶枫酒吧
快速注册请注意格式
确认密码：您当前位置：
> 一个非常好的响应式css框架 Pure?
一个非常好的响应式css框架 Pure?
响应式，就是根据浏览器或不同设备屏幕大小自适应内容。第一次查响应式呢，了解到是要在head里写判断浏览器宽度之类的东西，也要设置对IE低版本兼容。如：&meta name=&viewport& content=&width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;& /&&link rel=&stylesheet& type=&text/css& media=&screen and (min-width:1000px)& href=&css/special1000.css& /&
&link rel=&stylesheet& type=&text/css& media=&screen and (min-width:1900px)& href=&css/special1900.css& /&mete标签意思是不网页不缩放。然后css外链样式是指最低宽度少于多少就调用什么什么css，这就出现一个问题就是要写很多兼容性的css。但也有好处，就是某些不方便自适应的内容通过css进行手动调整。&Pure是我经过测试发现兼容IE低版本的一个框架，其它响应式国外布局有的会在IE8出现叠加等错乱问题。pure网址：http://purecss.io/第一次接触pure呢，比较没头绪。不过经过多次折腾，总算总结出了一套简单使用方法。第一步：设置meta&meta name=&viewport& content=&width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;& /&第二步：引用基础css，就是说，所有引用pure的代码之前，需要引入的一个css第三步：引用pure的主css&link rel=&stylesheet& href=&/pure/0.5.0/pure-min.css&&第四步：引入你需要的pure的css，这里呢，我们抛砖引玉，只管响应式布局：&!--[if lte IE 8]& &link rel=&stylesheet& href=&/pure/0.5.0/grids-responsive-old-ie-min.css&&
&![endif]--&
&!--[if gt IE 8]&&!--& &link rel=&stylesheet& href=&/pure/0.5.0/grids-responsive-min.css&&
&!--&![endif]--&好了。 该引用的都引用了。到底该怎么写呢？看看官方说的吧：&div class=&pure-g&& &div class=&pure-u-1-3&&&p&Thirds&/p&&/div& &div class=&pure-u-1-3&&&p&Thirds&/p&&/div& &div class=&pure-u-1-3&&&p&Thirds&/p&&/div&
&/div&我们新创建一个网页，加入引用以后，在body里加上这些div。所有的pure标签应该width都是100%的，通过几分之几来控制布局。（关于具体能做几分只几，请点击）pure的网格系统支持5格和24格，主要有两种样式：pure-g和pure-u-*1、pure-g，网格样式，例如&div class=&pure-g&&&/div&这样就实现了一个网格2、pure-u-*，单元格样式，网格里的内容必须放在网格单元里。例如pure-u-1-2表示单元格占1/2的宽度、pure-u-2-3表示单元格占2/3的宽度&pure-g是说这是一个表格，就相当于table，那表格内的单元格呢？那就是pure-u这里的-1-3指的是 分3列，每列占3分之1.注意：pure标签所在的div容器不要写其它控制性代码。好了，我们发现这自动扩展的3列希望有点间距，那么只要在标签内新添加div控制就可以了&div class=&pure-g&& &div class=&pure-u-1-3&& &div style=&width:90%;margin-left:90&& & & & &内容 &/div& &/div& &div class=&pure-u-1-3&&&p&Thirds&/p&&/div& &div class=&pure-u-1-3&&&p&Thirds&/p&&/div&
&/div&有的人好说了，没效果啊，重点来了。在class里加入& pure-u-1 pure-u-md-1-2 &pure-u-lg-1-3pure-u-1代表宽度最小时会有1个单元显示pure-u-md-1-2代表宽度达到一定时显示2个pure-u-lg-1-3代表宽度达到一定时显示3个目前我是这么理解的，大家可以测试下。
下一篇：没有了
准备开展业务？
客户服务中心(7×24)：400-
行业: 电子电工
行业: 化妆品
扫一扫，关注官方微信10:28 提问
ie7,ie8支持 transform rotate
怎么才能让ie7,ie8 支持css3的rotate旋转样式呢？
按赞数排序
用这个插件，如果不支持css3的会用滤镜来实现
其他相似问题今天看啥 热点：
使用自己的CSS框架（转），使用css框架[经典推介]CSS框架选择向导
不少CSS框架已经存在了一段时间，但大多数Web开发人员避免使用它们。 相反最有经验的开发者希望创建自己的CSS框架，提供个性化解决方案的优势，并减少对第三方的解决方案消极方面的依赖。虽然CSS框架，目的是加快网络开发，但是开发自己的全面的CSS框架，可能需要大量时间和精力。 本文将提供指导和精心挑选的资源，以协助你完成这一心愿。&&&&&&&&&&&&&&&&&&开始之前&&&&&&&&&首先尝试一些流行的CSS框架或者至少去看看他们提供的文件：&
&&&&&&&&&&&&&&&&您可能还需要检查。&&&&&&&&&&&&&&&&&为什么要建立自己的CSS框架？&&&&&&&&&在现代的网页设计中CSS起着至关重要的作用，它是真的不是很难学。没有理由不去寻求一个捷径完成这个似乎一劳永逸的事情。&&&&&&&&&&&&&&&&这里有一些具体原因/优点：&&&&&&&&&&&&&&&&&更有成效：&&&&&&&&&您将能够使用自己更有效的框架。&&&&&&&&&&&&&&&&&更好的设计兼容性：&&&&&&&&&您的设计将不依赖于如何制定一个框架，框架将自动支持你的设计的喜好。&&&&&&&&&&&&&&&&&更少的头痛的事：&&&&&&&&&你会不会继承错误或由其他人创建的缺陷。 当然，你自己的CSS框架可能有错误或缺陷，但你会更好地解决这些问题。&&&&&&&&&&&&&&&&&更大的灵活性：&&&&&&&&&当您的设计偏好与需求的有所变化时，您将能够轻松地对其进行修改。&&&&&&&&&&&&&&&&&额外的好处：&&&&&&&&&你不会花费您宝贵的时间来学习的框架，相反你的时间会花在学习更珍贵的东西：CSS。&&&&&&&&&&&&&&&&&让我们开始 - 分组及规则&&&&&&&&&最主要的反对意见是，开发自己的CSS框架将是复杂的任务。 CSS框架只不过是一个简单的在您的项目中您反复使用的CSS代码集合。优化和改善代码质量和效用的过程，需要额外的努力，技巧和时间。&&&&&&&&&&&&&&&&&让我们来看看什么类型的CSS代码是我们的项目中反复使用的。我们总是使用CSS布局，排版，表格和常用的如列表，图片等，我们还可以使用CSS来确保整体外观元素和感觉在所有Web浏览器中致。此外，我们有些人可能喜欢的组件（如菜单，图集，滑块等），我们在我们的项目反复使用; 包括它们在我们框架中的样式。&&&&&&&&&&&&&&&&&&&为了轻松维护您的框架的每一部分，将它分为多个CSS文件，例如：
&&&&&&&&&&&&&&&&reset.css&&&&&&&&base.css&&&&&&&&typography.css&&&&&&&&layout.css&&&&&&&&form.css&&&&&&&&table.css&&&&&&&&browser.css&&&&&&&&print.css&&&&&&&&&&&&&&&&上面的列表只是一个建议，你可以将你的框架分成任意数量的文件。 不过，为了从你的CSS框架获得最大利益， 你必须确保：&&&&&&&&&&&&&&&&您已彻底测试所有的主流浏览器的输出&&&&&&&&&&&&&&&&&&你已经遵循了CSS的最佳做法：&&&&&&&&&&&&&&&&&&&&&&&&&&简洁的代码，合理的结构和适当的文档&&&&&&&&&&&&&&&&&&用最少的class和ID&&&&&&&&&它已经过错误测试，并已通过验证
&&&&&&&&&&&&&&&&以CSS Reset, Base & Typography作为坚实的基础&&&&&&&&不同的浏览器各种元素有不同的默认样式（边距，边空，边界，轮廓等）。reset文件删除不一致的默认样式，并确保所有主要的浏览器会使用一致的样式渲染出你的网站。这里有两个最流行的CSS Reset，您可能会考虑在你自己的CSS框架中使用：&&&&&&&&
&&&&&&&&&&&&&&&&完成CSS Reset之后，下一个合乎逻辑的步骤是设置自己的Base，提供适用于所有主流浏览器一致的默认样式。这可能是在一个单独的所谓base.css文件中完成或与您Reset文件一起。这里有一些资源，协助您建立你的Base：&&&&&&&&
&&&&&&&&&&&&&&&&文字排版（Typography）是紧随每个具体设计的，所以包括在一个CSS框架中似乎首当其冲被认为是讨厌的和不明智的想法。但有一个覆盖了所有的基础的文字排版文件，是一个真正的节省时间的手段。甚至在一段时间内，针对不同详细的样式，因不同风格的字体的需要，你可能最终不得不用更多的不同的排版文件。&&&&&&&&&&这里有一些资源和工具来帮助您入门：
&&&&&&&&&&&&&&&布局（Layout，Layouts） - 寻找圣杯&&&&&&&&&&&&&&&&&布局是最棘手的，也许是一个CSS框架中最有争议的部分。 就像排版，布局随设计千变万化和您应该谨慎选择是否要让它成为你的CSS框架的一部分。你甚至可以考虑在你的框架中有一个以上布局文件的可能性。&&&&&&&&这里是一个可能提供进一步援助的资源清单：
&&&&&&&&&&&&&&&&Forms & Tables - 为什么不？&&&&&&&&&&&&&&&&&表单和表格二者均可以包括在你的base.css文件之中。不过，拥有更多的附加模板，将为您的设计能应对不同的需求增加很大的价值。&&&&&&&&在作出最后决定之前，先看看这些资源：&&&&&&&&
&&&&&&&&&&&&&&&&浏览器特定CSS&&&&&&&&&不幸的是，很多场合需要我们写一些浏览器特定CSS workarounds。 但是，CSS的hacks 或 workarounds可能会产生在CSS验证错误。为了克服这个问题，你应该在你的HTML文件使用条件标记包含browser.css。&&&&&&&&&这里有一些资源，供您参考：&&&&&&&&
&&&&&&&&&&&&&&&&打印样式&&&&&&&&&一个单独的打印样式表将极大地改善您网站的可用性，特别是对大量的内容页面。&&&&&&&&&以下是一些额外的指导资源：&&&&&&&&
&&&&&&&&&&&&&&&&你还可以做什么？&&&&&&&&&你可以做更多的事情，这是背后即是要有你自己的CSS框架的主要思路。 您可以创建许多抽象的CSS文件，只要你喜欢，如：&&&&&&&&&&&&&&&&&component.css （组件）&&&&&&&&这可能包括CSS常用的成分，比如下拉菜单，工具提示等&&&&&&&&&application.css （应用）&&&&&&&&这可能拥有多个版本针对您经常设计的每一个不同类型的应用程序。 例如：WordPress，Drupal，BlogEngine.Net等。&&&&&&&&&&&&&&&&最后 - 使用自己的CSS框架&&&&&&&&&使用你的框架就是简单地包含所有必需的文件在你的HTML之中。但包含一些不必要的CSS文件意味着额外的HTTP请求。为了避免这种情况你应该首先将所有的文件合并（browser.css和print.css文件除外），然后包含这个新的CSS在你的项目文件中。&&&&&&&&&&&&&&&&&&为了保持本文的短小，只提供了一些有限的资源，所以请随意寻找更好的替代品，并与我们其他人分享您的意见。&&&&&&&&您也可以在快速浏览一下：&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&发表于 April 1st, 2009 原作： Saud Khan&&&&&&&&原文网址：&&&&&&&&&&&&&&&&译者注：这实际是一篇老文章了。但至今看起来仍然让人兴奋。主要是在于，此文章不在于让你学会什么，而在于指导你做什么。自 OO CSS（面向对象CSS）概念产生以后，随后的老牌的OOCSS框架，BulePrint框架面世，到现在，数10种CSS框架，让你无法确定该选择哪一个。&&&&&&&&另一方面，选择以后，必然会有后悔。正如上文所说。所以，多数人的愿望是：自己写一个。&&&&&&&&当然，能按本文写一个象样的CSS框架，按本文所说，初学者一样能做到。因为，本文让你参考的都是权威，经典，名篇。当然，另一方面，如果你真的有一定的CSS功底，那就更是水到渠成。所以，希望自己写的，但愿你是至少读过《精通CSS》一书的。
他有框架包，你要看懂每个框架包的样式都是做什么用的。而且有一些还是需要自己写的。
1、布局先把大框架确定，再逐步把内部的细节构建出来，从层级关系来看就是由外往内布局；2、如果你对divcss不是很熟悉，那么你可以先以图片作为背景图片代替3、如果对布局定位不是很熟练，那么可以暂时以绝对位置来布局4、自己不熟悉的情况下，在设计平面页面的时候就要先考虑到自己是否有能力写出这个页面的布局出来，或者说自己写出来的不出问题；比如圆角、阴影、半透明效果、模块错位叠加等等；其实页面布局是否简单只是相对而言的，精通的人和新手的看法肯定不同，从长远来看，新手还是不要取巧，写divcss代码的时候不要怕出错，不要怕难，碰到了问题就去寻找解决的方法，针对问题然后去解决问题是最好的解决方式，当你不再碰到问题或者很少碰到问题的时候，就说明你已经精通或者离精通不远了还有一点要说一下，学习得有一个喜欢的态度，不要当做负担或者任务来学习，当你对一个东西感兴趣的时候你会学习的很快；就好比读书的时候某些学生某一科的成绩一直很好，绝大部分人其实都是感兴趣才会学的那么好
暂无相关文章
相关搜索：
相关阅读：
相关频道：
&&&&&&&&&&&&&&&&&&
Javascript最近更新}