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; 
} 

 

  

posted @ 2016-01-11 20:56  Mablevi  阅读(170)  评论(0编辑  收藏  举报