我想怎么打真人CSS 有去的吗

来源：蜘蛛抓取(WebSpider) 时间：2018-01-31 02:52 标签： 怎么打真人CS

本文全文转载需购买版权(500?)，摘要引流则免费，具体

CSS3 border-radius可以轻易实现圆还有圆角效果，然而，需要IE9+浏览器才行。移动端自然不成问题，但是众多（尤其面向C侧）PC页面是至少需要兼容IE8的，那有没有什么办法可以让IE7, IE8也支持圆角呢？

很久很久以前介绍过一个名为PIE的东西可以实现IE7,IE8的圆角，是10年7月份写的一篇“”（本文还有其他很多圆角方法介绍）。

其原理是利用的IE私有的behavior，本质上还是JS代码。

这里，给大家介绍一个使用纯CSS实现IE7,IE8浏览器正圆角的例子。

我们直接看demo，您可以狠狠地点击这里：

结果，IE7浏览器下：

有小伙伴评论反映IE8下不是正圆，然后，今天我特意打开10年前还是XP系统的笔记本，使用原生的IE8浏览器看了下，除了边缘糙了点以外，还是正圆，如下截图：

因此，反映IE8圆角不是正圆的小伙伴，可否提供更多的信息。例如，比方说操作系统，或者是否在IEtester类似软件中测试的等。

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

上面demo，如果我们去掉父级的overflow，IE浏览器下就会这样：

同等条件下的Chrome则是方点：

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

/* 值显示左上角那个圆点 */

是不是很好理解。完整CSS和HTML代码。

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

本文介绍的方法可以轻松实现一个圆效果，而且可以无缝全兼容。但是，不足在于只能实现个圆，如果你想实现任意大小的圆角效果，怎么说呢？理论上也是可以实现的，但是，需要很多个元素进行拼接。就是dotted边框模拟小圆角，直线部分需要矩形进行拼接。但是，显然成本就很高了，在我看来，为了注定要淘汰的IE7，IE8浏览器这么折腾，是不划算的。

其实，有些字符放到足够大，也是个正圆。但是呢，字符的问题在于，受字体和系统的影响相当大，很难像素级精确定位。因此，不如这里的border模拟效果好。

母校进入了看海模式，我不开心了！

你以为我是心疼被淹了吗？

不是，你想多了！我只是生气，为什么我呆的4年时间就没有被淹呢！！？你可知道，东九那条湖里养了多少大鱼吗？这一发大水，这鱼肯定往外跑啊，我就可以下水抓鱼顶生活费了呀！为什么这么好的事情我没遇到，没有天理啊！不开心了！

我抓鱼真的很厉害，为了证明不忽悠大家，特地从人人网找了张大学的图：

本文为原创文章，尊重辛勤劳动，可以免费摘要、推荐或聚合，但完整转载需付费购买版权，详见

1、处理折叠和展开的动画效果时候，使用transition（过渡效果），开始隐藏div时候使用了display：none;  transition没有效果，因为视图中已经没有div的物理位置，重新block后，回流和渲染，而visbility：hidden还保留其物理位置，只需要渲染就可以，transition起作用，记得以前做东西时候，经常会遇到相似的问题，但是，可能对display先入为主，总是先想到这个小玩意去隐藏元素，display会影响transition的效果，dom元素要在视图中有位置，才能进行一系列动画效果，注意这一点。

2、处理div时候用到了兄弟选择器，经试验，可以使用多个“+”选择兄弟的兄弟等。

我要回帖

更多关于 怎么打真人CS 的文章

 

随机推荐