css3的一些总结

渐变颜色：

background-image：linear-gradient(to left ,#ccc ,#eee.....)   #ccc是颜色的开始到结束可以设置两个或者多个值

1,参数是渐变的方向。第一个是to不变。方向是它的指向

to left是从这右向左。

to right是从左向右。

to top left是从右下向左上。

totop right是从左下向右上。

我一般都下面这个：

background:-webkit-grandient(linear,left top,left bottom,form(#555),to(#000));

white-space设置元素如何处理留白

white-space:nowrap强制文本在一行显示，强制不换行。

white-space：normal 默认。会被忽略

pre-wrap 正常进行换行

word-wrap:normal  默认

word-wrap:break-word   长单词或者url地址进行换行

@font-face加载服务器上的字体，让浏览器端显示用户电脑没有安装的字体

@font-face{

   font-family:"A";  //A自命名字体。然后你就可以直接用A来代替这个字体

   src：url(); 

  }

使用  .p{font-family:'A'}

background-origin设置背景图片的原始起始位置

background-origin:border-box/padding-box/content-box

border-box:背景从边框开始显示

padding-box：从内边距

content-box：内容区域

background-clip 裁剪背景图片

background-clip:border-box/padding-box/content-box

和background-origin一样的参数，但是他是放在左上角然后按照这个规则进行剪切

background-size：长度值/百分比/cover/contain

cover拉伸并填满

contain 等比例缩放让宽或者高能够填满容器。可能有空白。

background的合集

可以在一个div里面设置多个背景图片，然后通过background-position来定位。

background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
                      url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
                      url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
    background-position: left top, 100px 0, 200px 0;   //三个图片三个不同的位置.这样才能不重叠
    background-repeat: no-repeat, no-repeat, no-repeat;

属性选择器

E[attr^="a"]{   }   选择匹配元素E.有个属性以a开头。这个属性不一定是class，也可以是href。id。title

E[attr$="a"]{  }   --以a结束

E[attr*="a"]{  }    含有a

<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>

a[class^=icon]{
background: green;
color:#fff;
}
a[href$=pdf]{
background: orange;
color: #fff;
}
a[title*=more]{
background: blue;
color: #fff;
}

root 根选择器，匹配所有文档的根目录。在html文档中，根元素始终是html。所以：root{}和html{}意思是一样的。

结构性伪类选择器

1.not。选择除了该元素之外的其他元素

input:not([type="submit"]){
     border:1px solid red;
}

input:not([class="sub"]){
     border:1px solid red;
}

2.empty 选择没有任何内容的元素

<p>我是一个段落</p>
<p> </p>
<p></p>​

p:empty{color:red;}