小记心得

css3小模仿一下太阳系，钟表

今天遇到一个问题，在IE浏览器下，使用label FOR radio后，label中的图片无法选中。例如，这样的代码  这种情况下，点击label的图片将无法选中radio选项。解决这个问题，目前可以有三种方法，分别是通过JS、CSS或者HTML代码3个方面来解 决。方法一，JS：window.onload = function(){ if(documen

placeholder占位符文字，也可以设置对应的颜色，透明度等样式，具体如下：/*placeholder字体颜色*/::-webkit-input-placeholder { /* WebKit browsers */ color:#ccc;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#ccc;}

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important;}去除黄色背景。outline:none;去了 input 焦点 边框详细请参考：http://www.cnblogs.com/zhaokai021/p/4625169.html

由于最近工作中，经常会遇到一些动态百分比的仪表盘，一开始都是用图片样式方式实现；但是随着越来越多的项目，决定用canvas绘制一个简易的仪表盘，便于以后项目中直接使用；现版本只是书写为方法形式，也许之后会有时间对其优化为插件形式。简简单单而已，以下直接给出代码： canvas绘制简易百分比仪表盘dash

当你需要在某个动画开始或者结束时，去触发某一个事件，那么这时候可以用到监听animation事件方法；具体如下：    1、-webkit-animation动画其实有三个事件：    开始事件 webkitAnimationStart    结束事件 webkitAnimationEnd    重复运动事件 webkitAnimationIteration

一个下雨的星期六，闲来无事听听窗外雨声，抿一口清茶！废话不多说，做前端的朋友们都一定碰到IE6对position:fixed定位不支持的问题，虽然IE6即将被淘汰，但是以目前国内网络用户而言，依然是一庞大的用户群体，所以咱们不得不对此做兼容处理。解决方式：用position:absolute来替代fixed，IE的CSS表达式(expression)来完美的实现ie6下position:f

timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效，有多种特效展示。通常我们常用的如下：    ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)    linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)    ease-in: cubic-bezier(0

当你遇到input元素中，type设置为数字格式number时;心中也许会有疑惑：input的type="number"在部分手机端会出现一个小按钮要如何解决?怎么移除HTML5 input在type="number"时的上下小箭头？如何移除 input type="number" 时浏览器自带的上下箭头？以上疑惑怎么解决；很简单，只要css控制即可。css代码：i

fontAwesome代替网页icon小图标引言奥森图标（Font Awesome）提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影。网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标，会显得非常简陋。下面的小图标，你也可能经常会看到的，如图所示：你可能说——“我们用的都是彩色的，不是黑白的”——别着急，下面会讲到

css代码：.draw-out{width:400px;height:400px;margin:30px auto;position:relative} .draw-bottom{width:400px;height:400px;position:relative} .draw-bottom section{width:400px;height:1px;background:#d6d6

css代码：.draw-out{width:400px;height:400px;margin:30px auto;position:relative}.draw-out section{width:400px;height:1px;background:#d6d6d6;position:absolute;top:200px;left:0}.draw-out section.s2{transf

上接：css3转盘抽奖示例-转指针css代码：.draw-out{width:400px;height:400px;margin:30px auto;position:relative}.draw-bottom{width:400px;height:400px;position:relative;transition:all 4s ease;-webkit-transition:al

利用border绘制小三角

昨天公司任务中，有涉及到一个比较老的网站静态文件整理压缩过程，于是采用了grunt工具的压缩插件grunt-contrib-cssmin来进行js和css的压缩整理；发现引用压缩后的css之后，页面在ie7下出现错乱现象，其他高版本浏览器则正常显示，于是各种排查，对比文件，网上查找相关资料，终于找到了原因所在。grunt-contrib-cssmin压缩css文件时，默认设置情况下会删除c