HTML5-CSS3学习20150410（一）

一、

HTML5在JS方面新增的东西

document.querySelector(“css选择器”);

document .querySelectorAll(“css选择器”);

var aEle = document.querySelectorAll(“li input[type=text]”);

var obj = document.querySelector(“li input[type=text]”);

aEle[0].style.background = red;

obj.style.background = red;

兼容IE8+

二、

jquery对象就是对原生对象的封装，所以$得到的东西，instanceof Array虽然看起来是数组，但是它不是数组。因为我们通过document获得的对象，虽然看起来是数组，但是它不是数组！！！

jquery是原生的扩展，它的根就不是数组，所以jquery对象怎么也不会成为数组，除非它把这玩意儿拿出来，再重新弄一边

三、

transition:1s all ease;

         时间：1s  500ms

         all：属性（width、height等）

         ease：运动形式

         linear:线性

         ease:缓冲

         ease-in：加速

         ease-out：减速

         ease-in-out：先加速后减速

         transition:1s width ease, 10s height ease;

         #div1{ height:300px; 300px;}

         //transition可以同时使用多个，这些属性都是同时运动的

         下面这样写，也可以做到同时支持多个属性

         transition:1s all ease; height:100px; 100px;

         #div1{ height:300px; 300px;}

         display没有transition效果

四、

border-radius:10px 20px

         左上/右下   右上/左下

         border-radius:10px;

                   全部

         border-radius:10px 20px 100px;

         左上  右上/左下  右下

         border-radius:10px 20px 100px 140px

单位还可以用百分比， pt等

五、text-shadow:水平阴影 垂直阴影 模糊半径 阴影颜色

text-shadow:100px 100px 10px red;

p{ text-shadow:1px 1px 1px red,3px 3px 2px blue,5px 5px 5px yellow;}

六、

box-shadow属性至多有6个参数设置，他们分别取值：

阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值”inset”， 就是将外阴影变成内阴影，也就是说设置阴影类型为”inset”时，其投影就是内阴影；

X-offset：是指阴影水平偏移量，其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边。

Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

阴影的模糊半径：此参数可选，但其值只能是正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就月模糊；

阴影的扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都将延展扩大，反之值为负值时，则缩小。

阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

#div1{ 200px; height:200px; background:red; box-shadow:100px 1px 50px #000;}

其中：100px代表x轴偏移半径，1px代表y轴偏移半径，50px代表模糊半径（不代表扩展半径）

#div1{ 200px; height:200px; background:red; box-shadow:100px 1px 50px 20px #000;}

其中：100px代表x轴偏移半径，1px代表y轴偏移半径，50px代表模糊半径，20px代表扩展半径

七、

radial-gradient(

　　[<position>,]?

　　[[<shape>||<size>] | <shape-size>{2},]?

　　<color-shape>[,<color-stop>]+)

position:

　　<percentage>1、用百分比指定径向渐变圆心的横坐标。可以为负值

　　<length>1、用长度值指定径向渐变圆心的横坐标值。可以为负值

　　left:设置左边为径向渐变圆心的横坐标值

　　center:设置中间为径向渐变圆心的横坐标值

　　right:设置右边为径向渐变圆心的横坐标值

　　<percentage>2、用百分比指定径向渐变圆心的纵坐标值。可以为负值

　　<length>2、用长度值指定径向渐变圆心的纵坐标值。可以为负值

　　top:设置上边为径向渐变圆心的纵坐标值

　　center:设置中间为径向渐变岩心的纵坐标

　　bottom:设置底部为径向渐变圆心的纵坐标

<shape>

　　　　circle:指定圆形的径向渐变

　　　　ellipse:指定椭圆形的径向渐变

<size>

　　　　closest-side:指定径向渐变的长度为从圆心到离圆心最近的边

      　　closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角

      　　farthest-side: 指定径向渐变的半径长度为从圆心到离圆心最远的边

      　　farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角

      　　contain：包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side

      　　cover：覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner

<shape-size>

　　　　　　<percentage>:用百分比指定径向简便的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或者椭圆。不允许负值

　　　　　　<length>：用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直接来确定是圆或椭圆。不允许负值。<color-stop

　　　　　　<color>：指定颜色。

　　　　　　<length>：用长度值指定起止色位置。不允许负值。

　　　　　　<percentage>：用百分比指定起止色位置。

八、

线性渐变：

#div1{ 300px; height:300px; background:-webkit-linear-gradient(top bottom, red 10%, blue 10%, yellow 50%);}

#div1{ 300px; height:300px; background:-webkit-linear-gradient(180deg, red 20px, blue 10%, yellow 200px);}

#div1{ 300px; height:300px; background:-webkit-linear-gradient(top bottom, red, blue, yellow);}

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

下述值用来表示渐变的方向，可以使用角度或者关键字来设置：

<angle>：

用角度值指定渐变的方向（或角度）。

to left：

设置渐变为从右到左。相当于: 270deg

to right：

设置渐变从左到右。相当于: 90deg

to top：

设置渐变从下到上。相当于: 0deg

to bottom：

设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

<color-stop> 用于指定渐变的起止颜色：

<color>：

指定颜色。

<length>：

用长度值指定起止色位置。不允许负值

<percentage>：

用百分比指定起止色位置（起止的意思就是，如果是两个颜色的话，那么第一个位置表示第一个颜色的开始渐变的位置，第二个位置表示第二个颜色结束渐变的位置）。

如果是三个颜色的话，前两个表示颜色开始渐变的位置，最后一个表示结束渐变的位置

九、