css
文章平均质量分 67
神神的蜗牛
这个作者很懒,什么都没留下…
展开
-
使用PIE对IE进行CSS3兼容介绍和经验总结
国外团队开发的兼容插件,去年做项目时才发现,非常强大主角:PIE.js , PIE.htc 两种方法可以实现官方网站:http://css3pie.com/ 演示地址:http://css3pie.com/demos/gradient-patterns/ 重要功能实现:可以使 IE6、7、8 、9 实现类似 chrome 和 firefox 1. 更原创 2014-02-03 14:03:45 · 4256 阅读 · 0 评论 -
transform: scale() 图片文字模糊的原因
今天做一个刮刮乐H5应用的时候,用到了个简单的 CSS 动画效果,就是使用缩放transform: scale(.1) 从小变大弹出获奖窗口,以及按钮重复变大变小的动画,结果遇到个很郁闷的问题,按钮和文字变得非常模糊,完全没法看,很是奇怪,搞了半天才找到原因:因为使用了两层缩放,导致第二次缩放继承或者说使用的按钮渲染尺寸已经不是原来正常的尺寸,而是之前被缩放后的尺寸导致当前缩放模糊,有点晕哈。具体动原创 2017-12-25 17:02:14 · 21247 阅读 · 0 评论 -
如何屏蔽UC强制嵌入到你网站页面上的垃圾广告
下面方法已经失效,可参考最新方法: 屏蔽UC强制嵌入到网页的垃圾广告方法第二版链接:https://blog.csdn.net/zhouzme/article/details/79927539不知道大家在手机上用UC浏览器的时候, 有没有注意到网页底部有时候会随机出现一大块广告如下图: 为了避免广告嫌疑, 我这里主要用 CSDN 的官网举例(其实已经处处可见了, 大部分网站页面...原创 2017-04-28 18:21:22 · 57537 阅读 · 13 评论 -
SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子
今天在手机上试了试这个 css3 动画效果,可以把动画效果停留在最后一帧上,以及鼠标 :hover 暂停动画,比较实用的功能,不用 JS 也能实现这些效果了。不过测试体验感觉手机上没有 jQuery 的animate 动画流畅,比较卡,还是没用上,这里把测试结果做个记录!我这里用到 compass@import "compass/_css3";@include keyframes(PanelNavR原创 2016-06-01 00:34:38 · 8153 阅读 · 1 评论 -
PHPStrom使用SASS,SCSS和Compass
以前尝试 SASS 的时候写了一篇安装方法,大部分操作还是相同,下面补充一些内容主要是填坑,实在太TMD坑爹了。 参考这篇文章: http://blog.csdn.net/zhouzme/article/details/45059419补充内容:安装 SASS 和 Compass 这一步经过我昨天的测试,已经不需要修改源地址了,可以直接通过 https://rubygems.org/ 地址进原创 2016-03-12 15:30:28 · 4164 阅读 · 1 评论 -
Chrome浏览器加载CSS文件TTFB waiting超时的奇葩问题
今天本来调试 requirejs 加载js异常的问题,试了下Chrome浏览器,结果意外发现这个 CSS 加载异常的BUG,非常非常奇怪。本地测试环境是 wi7x64 安装的 XAMPP 3.2.1 服务器套件没什么特殊配置。目前就发现只对下面这段 css 代码有异常 seta.css:@charset "utf-8";html { font-size: 125%; }html,body,h1,原创 2016-01-18 11:57:29 · 10287 阅读 · 0 评论 -
PHPStorm 安装 SASS、SCSS + Compass
许久没更新博客啦,这两天研究了下 SASS 和 LESS ,最终选了 SASS,因为相对比较成熟些吧,试了很多坑之后,终于成功了,下面上步骤:1. 安装 PHPStorm 的 SASS 插件好像是自带了该插件的,如果没有的话,就打开 setting -> plugins 自己安装一个吧,就不多说了2. 安装 RubyWindows 版本下载地址:htt原创 2015-04-15 16:05:42 · 6330 阅读 · 0 评论 -
CSS之box-sizing的用处简单介绍
前几天才发现有 box-sizing 这么个样式属性,研究了一番感觉很有意思,通过指定容器的盒子模型类型,达到不同的展示效果例如:当一个容器宽度定义为 width:100%; 之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的如果使用该样式,指定为 box-sizing: border-box; 则 padding 和 bo原创 2014-08-16 22:41:27 · 5637 阅读 · 0 评论 -
很酷的光线滚动效果
今天看到一个国外的网站有这么个效果,很好奇如何实现的,研究了一番,将效果实现了,很酷,不用任何图片http://abemedia.co.uk/content-management-systems-cms @-webkit-keyframes rotate1 { from { -webkit-transform: rotate(0deg); }原创 2014-07-29 14:38:15 · 2266 阅读 · 1 评论 -
安卓系统浏览器中select下拉按钮无法弹出选择面板奇怪问题解决
今天遇到个让人崩溃的问题:平台:安卓 4.0描述:使用 appcan 开发 hybrid 应用,手机上点击下拉选框按钮无法弹出选择面板。说明:发现 webkit 内核 position:fixed; 和HTML的 select 标签有冲突,只要 select 区域上(上方都不用说了被遮盖了肯定无效)或下方存在 固定定位原创 2014-02-27 01:45:45 · 11075 阅读 · 2 评论 -
Webkit浏览器点击控件时出现的边框消除
-webkit-tap-highlight-color:rgba(0,0,0,0);其实是将边框颜色透明,让其不可见了而已原创 2014-02-27 01:44:08 · 1904 阅读 · 0 评论 -
让IE的Button自适应文字宽度兼容
width:auto;overflow:visible;这样将可以去掉IE按钮文字两边多余的空格,并按照自己设置的padding 来显示原创 2014-02-27 01:30:05 · 1451 阅读 · 0 评论 -
PIE使用阴影后的背景透明方法
使用PIE后,会发现如果有设置 box-shadow 时,当前 class 样式中设置 opacity 或者背景渐变透明都会无效了,其实也是有办法解决的css3-container { filter:alpha(opacity=80); }#header-wrapper { height:35px; background: -webkit-gradient(linear,l原创 2014-02-03 14:27:29 · 2044 阅读 · 0 评论 -
浏览器 CSS 兼容写法的测试总结
做前端最讨厌的就是 IE6,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊。现在有了IE9,IE10还好些,几乎和 Chrome,Firefox 差别不大了,但是IE6,IE7,IE8还是要做单独兼容的,这里总结下兼容方法:对于 IE6、IE7、IE8 进行 CSS 兼容方法可以看看这篇文章http://www.zhou原创 2014-02-03 14:14:29 · 1343 阅读 · 0 评论 -
纯CSS实现斜角
今天看了看腾讯的七周年时光轴,发现这个斜角的CSS,研究了半天提出下面代码可以直接实现斜角,不是CSS3哦,那个就太容易了 -webkit-transform:rotate(10deg); 倾斜度后再隐藏直接就可以了,下面要说的更方便实现:.dot {font-size: 0;line-height: 0;border-width: 10px;border-colo原创 2014-02-02 21:03:39 · 17512 阅读 · 0 评论 -
CSS Hank兼容浏览器的
aacolor:red; /* 所有浏览器都支持 */color:red !important; /* 除IE6外 */_color:red; /* IE6支持 */*color:red; /* IE6、IE7支持 */+color:red; /*IE7支持*/*+color:red; /* IE7支持 */color:red\9; /* IE6、IE7、IE8、IE9原创 2014-02-02 20:43:38 · 4899 阅读 · 0 评论 -
CSS中RGBA的兼容方法以及透明度计算方法
CSS对IE使用背景透明 实现 rgba 效果height:35px;background: -webkit-gradient(linear,left top,left bottom,from(rgba(68,102,113,0.9)),to(rgba(46,74,83,0.9)));background: -moz-linear-gradient(top, rgba(68,102,113原创 2014-02-03 14:23:39 · 4865 阅读 · 0 评论 -
纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法http://blog.csdn.net/zhouzme/article/details/18901943,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码:无标题文档.area { margin:100px auto; width:300px; hei原创 2014-02-03 14:19:35 · 31546 阅读 · 1 评论 -
屏蔽UC强制嵌入到网页的垃圾广告方法第二版
先强烈谴责鄙视下UC 这种无耻的、明目张胆的劫持网站流量的强盗行为之前写过一篇关于 如何屏蔽UC强制嵌入到你网站页面上的垃圾广告 的文章 链接:https://blog.csdn.net/zhouzme/article/details/70932684 但最近发现已经失效了,犯贱的UC 果然没有让人失望,做了许多反屏蔽措施。先说明下,此文中方法测试于 2018年04月13号 ,不确定此日...原创 2018-04-13 13:28:16 · 19837 阅读 · 11 评论