12个鲜为人知的css现象(续集)
By hiluluke on
本文翻译自 12 little known css facts(the-sequel)
原作者是Natalia Balska
原作者在一年前也发表过一篇12个鲜为人知的css现象,然后这篇文章现在也还很受欢迎,有时间的同学可以看看。原作者又收集了更多的鲜为人知的css性质,也就是这篇文章的来源。
1、border-radius
有“/”的语法
首先,下面这个你信或则不信它都是一条border-radius
的正确的代码:
1 | .box { |
如果你没见过,可能会有些困惑,下面是一些介绍:
如果给定的值中有“/”,则在“/”前面的值是指定水平方向的半径(radius),在“/”后面的就是指定垂直方向的半径(radius)。如果没有“/”,就是同时指定水平和垂直方向的半径(radius)。
canvas 笔记(1)
By hiluluke on
初步
首先需要在html中定义html结构
1 | <canvas id="mycanvas" width="600" height="300"></canvas> |
然后需要在js上获取canvas和定义动画类型
1 | var canvas = document.getElementById("mycanvas"); //获取canvas |
然后就可以进行一些绘图操作:
1 | context.lineWidth = 10;定义线条宽度 |
javascript继承
By hiluluke on
本文主要是自己在阅读javascript高级程序设计之后所做的笔记。
js的继承主要依靠原型链的方式实现,与一般的oo语言有些不一样。
原型链
利用原型让一个引用类型继承另一个引用类型的属性和方法。让原型对象等于另一个类型的实例。
1 | function SuperType(){ |
前几天公司一个同事说了gulp用着太爽了,比grunt语法好很多。然后就猴急的尝试了下,并在公司之前的一个项目上做了实验。觉得有下面几点优点:
- 更像是就是js语法,写起来很顺
- 代码执行顺序更清晰
- 代码量更少,主要是因为grunt各种大小括号换行导致其看起来很臃肿。
- gulp.watch 太好用了。。
当然有几点grunt也是有优点,比如本省就支持在代码上面添加banner,但是gulp需要使用插件。
最后,推荐小伙伴也尝试着去使用gulp。下面是我自己的一些笔记。
gulp常用插件
- less的编译gulp-less
- 自动添加css前缀gulp-autoprefixer
- 压缩cssgulp-minify-css
- js代码校验gulp-jshint
- 给代码头部添加公司等之类的注释 gulp-header
- 替换文本,用于修改版本号之类的 gulp-replace
- 合并js文件gulp-concat
- 压缩js代码gulp-uglify
- 压缩图片gulp-imagemin
- 自动刷新页面gulp-livereload
- 图片缓存,只有图片替换了才压缩gulp-cache
- 更改提醒gulp-notify
- 清除文件del
安装插件和grunt一样就用npm了,不啰嗦。