2016年1月11日前端学习笔记

一、box-shadow 给元素增加周边阴影

　　语法 box-shadow:[inset] x-offset y-offset blur-radius spread-radius color;

　　分别对应的是

　　投影方式：[inset] 内阴影 默认：外阴影

　　X轴偏移：x-offset 正数往右 负数往左

　　Y轴偏移：y-offset 正数向上 负数向下

　　阴影模糊半径： blur-radius

　　阴影扩展半径：spread-radius

　　阴影颜色：color

　　注：多阴影顺序：左->右->上->下

二、css3兄弟选择器[E~F]

　　选择E元素后面所有的兄弟元素F

　　例如:

<style type="text/css">
div ~ p {background-color:#00FF00;}
</style>

<div>
　　<p>匹配E元素之后的F元素</p>
　　<p>匹配E元素之后的F元素</p>
</div>
 <hr />
 <p>匹配E元素之后的F元素</p>
 <p>匹配E元素之后的F元素</p>
 <hr />
 <p>匹配E元素之后的F元素</p>
 <hr />
 <div>匹配E元素之后的F元素</div>
 <hr />
 <p>匹配E元素之后的F元素</p>

三、去除IOS系统中web页面点击时产生的黑色半透明背景（点击div，input都有可能出现）

　　直接在样式里加，-webkit-tap-highlight-color:rgba(0,0,0,0);

　　例如：

　　input[tpye='text']
　　{
　　　　-webkit-tap-highlight-color:rgba(0,0,0,0);
　　}

 

四、HTML DOM Image对象 complete属性

　　complete属性可返回浏览器是否已完成对图像的加载

　　加载完成返回true,否则返回false

 

五、JQuery：eq()选择器

　　$('p:eq(1)') 意思是选择第二个P元素

　　语法：$(':eq(index)')  index,规定元素的index值，index从0开始

 

六、Chrome支持input=[type=text]占位文本属性 (input,textarea相同)

　　::-webkit-input-placeholder

　　

::-webkit-input-placeholder { /* WebKit browsers */ 
color: #999; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #999; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #999; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: #999; 
}