CSS 原来可以这样写（二）

接着 CSS 原来可以这样写（一） 估计大家对css 的一些基础写法了解了一些吧。大家不要感觉这个基础的没必要去学习，当你没有绝对牛逼的经验的时候，真的有必要去学习去牢记以下的哦！

总是我承认我是菜鸟我需要学习的哈哈哈！

疯狂的动物成（让小伙的技术也这样子焕然一新吧）

1.  渐变：

.a{
    background:-webkit-gradient(linear,left top,left bottom,from(#69bdf9),to(#4aa7e8));
    background:-moz-linear-gradient(top,#67bcf8,#3b96d6);
    background:-o-linear-gradient(top,#67bcf8,#3b96d6);
    background:linear-gradient(top,#67bcf8,#3b96d6);
}

注：不懂 gradient 的请好好看看基础哦小伙伴！自己动手试试吧。

分享一个网站不要偷笑哦：http://www.colorzilla.com/gradient-editor/

2. 投影：

.b{
    box-shadow:inset 1px -1px 0 #f1f1f1;
    text-shadow:1px 1px 0px #630;
}
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000',endColorstr='#99000000');
background:rgba(0,0,0,.6);
background:rgba(0,0,0,0.5);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#50000000',endColorstr='#50000000')9;

注：看哪个startColorstr和endColorstr，一共8位，后6位是RGB的颜色代码，前两位是16进制的，比如60%透明，就是256×0.6=154，再换算成16进制=9A

background-image:-ms-linear-gradient(top, #fff, #ddd); ie10渐变

alpha透明兼容代码生成：http://leegorous.net/tools/bg-alpha.html

3. 进制的转换

http://www.zhangxinxu.com/wordpress/2010/05/rgba%E9%A2%9C%E8%89%B2%E4%B8%8E%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A%84%E5%8D%8A%E9%80%8F%E6%98%8E%E8%83%8C%E6%99%AF%E8%89%B2/

3. search占位

::-webkit-input-placeholder {}
::-moz-input-placeholder {}
input:focus::-webkit-input-placeholder { 
    color: transparent; 
}
-webkit-appearance:none; google边框去除
input[type="search"]{
    -webkit-appearance:textfield;   // 去除chrome默认样式
} 
line-height: normal; /* for non-ie */
line-height: 22px9; /* for ie */

4.HTML中的title换行问题

title 换行：

在title属性中使用AscII码：

<a HREF="#" TITLE='第一行&#13;第二行'>A</A>

5. CSS 实现 textArea 的 placeholder 换行

由于placeholder属性是可以用css操作的，所以我们可以用:after来把placeholder的内容写到CSS中，曲线救国。

textarea::-webkit-input-placeholder:after{
  display:block;
  content:"line@ A line#";/*  A 表示换行  */
  color:red;
};

以上是webkit的代码，Firefox类也有相应的版本：

textarea::-moz-placeholder:after{
  content:"line@ A line#";/*  A 表示换行  */
  color:red;
};

6.阻止默认事件

pointer-events:none;

7. 变灰 gray:

html{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

8. firefox 阻止选中：

-moz-user-focus:ignore;
-moz-user-input:disabled;
-moz-user-select:none;

9. 箭头

display:block;
border:solid transparent;
line-height: 0;
width:0; 
height:0;
border-top:solid #0288ce
;border-width:8px 6px 0 6px;

border-style:solid;
border-width:7px; 
border-color:transparent transparent transparent #ff7020;

position:absolute;
top: 0;
left: 0;
border-width:20px;
border-style:solid;
border-color:#d1ddde transparent transparent #d1ddde;

注：ie6 bug测试，把border-style设为dashed.

10. 取消textarea右下角可拖动手柄：

resize:none;