本文翻译自 12 little known css facts(the-sequel)
原作者是Natalia Balska

原作者在一年前也发表过一篇12个鲜为人知的css现象,然后这篇文章现在也还很受欢迎,有时间的同学可以看看。原作者又收集了更多的鲜为人知的css性质,也就是这篇文章的来源。

1、border-radius 有“/”的语法

首先,下面这个你信或则不信它都是一条border-radius的正确的代码:

1
2
3
.box {
border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
}

如果你没见过,可能会有些困惑,下面是一些介绍:

如果给定的值中有“/”,则在“/”前面的值是指定水平方向的半径(radius),在“/”后面的就是指定垂直方向的半径(radius)。如果没有“/”,就是同时指定水平和垂直方向的半径(radius)。

canvas 笔记(1)

By hiluluke on

初步

首先需要在html中定义html结构

1
<canvas id="mycanvas" width="600" height="300"></canvas>

然后需要在js上获取canvas和定义动画类型

1
2
var canvas = document.getElementById("mycanvas"); //获取canvas
var context = canvas.getContext("2d");//定义2d动画

然后就可以进行一些绘图操作:

1
2
3
4
5
context.lineWidth = 10;定义线条宽度
context.strokeStyle = "blue";//定义线条样式(颜色)
context.moveTo(50, canvas.height);移动光标
contex.lineTo(x,y)//从光标的位置画一条线到(x,y)
context.stroke()绘图

less note

By hiluluke on

less比较好入门,看了2-3个小时的文档,觉得已经7788了。东西并不是很多。这个笔记比较干,比较精简,建议还是看文档好些,反正不难。

less基础

  • less运行
    其可以在html中嵌入一个less.js文件或则使用node工具lessc,也可以用gulp,grunt在部署之前编译。

lessc

1
sudo npm install -g lessc

然后就可以使用命令行编译less了。

1
lessc test.less test.css

上面代码就会将test.less编译输出在当前目录下test.css。

javascript继承

By hiluluke on

本文主要是自己在阅读javascript高级程序设计之后所做的笔记。

js的继承主要依靠原型链的方式实现,与一般的oo语言有些不一样。

原型链

利用原型让一个引用类型继承另一个引用类型的属性和方法。让原型对象等于另一个类型的实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//继承了 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue());//true

gulp note

By hiluluke on

前几天公司一个同事说了gulp用着太爽了,比grunt语法好很多。然后就猴急的尝试了下,并在公司之前的一个项目上做了实验。觉得有下面几点优点:

  • 更像是就是js语法,写起来很顺
  • 代码执行顺序更清晰
  • 代码量更少,主要是因为grunt各种大小括号换行导致其看起来很臃肿。
  • gulp.watch 太好用了。。

当然有几点grunt也是有优点,比如本省就支持在代码上面添加banner,但是gulp需要使用插件。

最后,推荐小伙伴也尝试着去使用gulp。下面是我自己的一些笔记。

gulp常用插件

安装插件和grunt一样就用npm了,不啰嗦。