1、怎样使背景图片完整的铺满整个容器，不管容器的尺寸如何变化,background-size:cover这个属性都可以做到。但是我们需要时刻牢记，带宽并不是无限的，因此在移动网页中通过css把一张大图缩小显示往往是不明智的。

2、CSS背景样式怪异的简写语法

background: url(tr) no-repeat top right / 2em 2em,
            url(br) no-repeat top right / 2em 2em,
            url(bl) no-repeat top right / 2em 2em;

你可以能已经注意到上面的那个背景属性简写的例子了：在background简写属性中指定background-size时,需要同时提供一个background-position值(哪怕他的值就是初始值也需要写出来),而且还要用一个斜杠(/)作为分隔。为什么简写如此怪异呢？
这通常都是为了消除歧义。在这个例子中，top right显然是background-position,而2em 2em是background-size,不管他们的顺序如何。但是,请设想一下50%这样的值,它到底是background-size还是background-position呢？当你展开属性时，css解析器明白你的意图；而当你使用简写属性时，解析器需要在没有属性名提示的情况下弄清楚50% 50%到底指的是什么。这就是需要引入斜杠的原因。

3、css如何实现半透明边框
假如我们想给一个容器设置一层白色背景和一道半透明的边框,body的背景会从他的半透明边框上透上来。你可能会这样写

body{
    border:10px solid hsla(0,0%,100%,.5);
    background: white;
}

很遗憾这样写是无效的，我们所做的事情并没有让body背景从半透明白色边框处透上来，而是在半透明白色边框处透出这个容器自己的纯白色背景，这实际上得到的效果跟纯白色的边框看起来完全一样。
背景与边框​​https://www.w3.org/TR/css3-background/​​

解决方法：
我们可以通过background-clip属性来调整上述默认行为所带来的不便。这个属性的初始值是border-box,意味着背景会被元素的border box(边框的外沿框)裁切掉。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为padding-box,这样浏览器就会用内边距的外沿来把背景裁切掉。代码如下：

border:10 solid hsla(0,0%,100%,.5);
background:white;
background-clip:padding-box;

demo案例，可以复制到本地测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>body {
    background:url('http://imgsrc.baidu.com/forum/w%3D580/sign=f4f47e663a87e9504217f3642039531b/7047a4efce1b9d16bf0eebc4f3deb48f8e5464ce.jpg');
}
div {
    border:2em solid hsla(0,0%,100%,.5);
    background: white;
    background-clip: padding-box;

    max-width:20em;
    padding:5em;
    font:100%/1.5;
}</style>
</head>
<body>
    <div></div>
</body>
</html>

4、CSS如何实现多重边框
方法一：
可能你已经无数次的使用过了box-shadow来生成投影，并且还通过第四个参数来控制投影面积的加大或减小。一个正直的扩张半径加上两个零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框。

background:yellowgreen;
box-shadow:0 0 0 10 #655;

这并没有什么，但是box-shadow可以支持逗号分割法，我们可以创建任意数量的投影。

div {
    width:100px;
    height:60px;
    margin:25px;
    background: yellowgreen;
    box-shadow:0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
}

注意：
①投影和边框不一样，因为他不会影响布局，而且也不会受到box-sizing属性的影响。不过,我们可以通过内边距或者外边距(取决于投影是内嵌还是外扩的)来额外模拟出边框所需要占据的空间。
②上述方法所创建出的“外框”；不会响应鼠标事件，如点击或者悬停，如果必须要这个事件，可以给box-shadow属性加上inset关键字，来绘制元素内圈，此时，需要增加额外的内边距来腾出足够的空间。
方法二：
如果你只需要两层边框，那么可以设置一层常规边框，再加上outline（描边）属性来产生外层的边框。这种方法比较灵活。相对于box-shadow（只能模拟实线边框）而言，outline还可以模拟出虚线边框。

background:yellowgreen;
border:10px solid #655;
outline:5px solid deeppink;

描边的另一个好处是，可以通过outline-offset属性来控制他和元素之间的间距，这个属性可以接受负值。
5、灵活的背景定位
针对某个角对背景图做背景定位，我们只能指定左上角的偏移量，或者干脆完全靠齐到其他三个角。但是我们有时候希望图片和容器的边角之间能留出一定的空隙（类似内边距的效果）；你可能会想到使用background-position的方法，基于它自身的的尺寸以及我们期望他距离右下角的偏移量，计算出背景图片距离左上角的偏移量。
当容器尺寸不确定时，就不容易做到了，我们通常只能设置某个百分比值，以便近似的得到想要的效果。
而现在你可以指定任意角度的偏移量了，你只要在偏移量前面指定关键词即可。例如我们希望让背景图片和右边缘保持20px的偏移量，同时跟底边保持10px的偏移量，就可以这样做。

background:url(img/1.jpg) no-repeat #58a;
background-position:right 20px bottom

假如浏览器不支持上述写法，我们还需要提供一种回退方案，避免背景图片紧贴在左上角，影响到文字的可读性。这种回退方案也很简单，就是把老套的bottom right 定位值写进background的简写属性中：

background:url(img/1.jpg) no-repeat bottom right #58a;
background-position:right 20px bottom

如何设置偏移量与内容的内边距一致？
在给背景图片设置距离某个角的偏移量时，有一种情况及其常见：偏移量与容器的内边距一致。我知道，你肯能会想到上面提到的background-position方法:

padding:10px;
background: url(code-pirate.svg) no-repeat #58a;
background: right 10px bottom 10px;

但是这样写比较麻烦，现在我们有了更简洁的方法，那就是使用background-origin;
background-position在默认情况下是以padding box为准的，所有这样边框才不会遮住背景图片。因此，top left默认指的的是padding box的左上角。现在我们可以使用background-origin,来改变这种行为，在默认情况下，他的默认值是padding-box。如果把它的值改成content-box。我们在background-position属性中使用的边角关键词将会以内容去的边缘作为基准（也就是说，此时背景图片距离边角的偏移量就内边距保持一致了）：

padding:10px;
background:url("code-pirate.svg") no-repeat #58a
background:content-box;

demo

div {
background:url(http://imgsrc.baidu.com/forum/w%3D580/sign=f4f47e663a87e9504217f3642039531b/7047a4efce1b9d16bf0eebc4f3deb48f8e5464ce.jpg)
                no-repeat bottom right #58a;
    background-origin: content-box;
    max-width:10em;
    min-height:5em;
    padding:30px;
    color: white;
    font:100%/1;
}

使用calc()函数方案
回到我们前面所说的，我们要把背景图定位到距离底边10px且距离右边20px的位置。如果我们仍然以左上角偏移的思路来考虑，其实就希望它有一个100% - 20px的水平偏移量，和100% - 10px的垂直偏移量。而现在我们可以使用calc()函数进行此类运算，

background:url("http://imgsrc.baidu.com/forum/w%3D580/sign=f4f47e663a87e9504217f3642039531b/7047a4efce1b9d16bf0eebc4f3deb48f8e5464ce.jpg") no-repeat;
background-position:calc(100% - 20px) calc(100% - 10px);

注意：calc()函数内的 + 和 - 运算符两侧必须有个空格，否则会解析错误。

6、边框内圆角
说到边框内圆角，你可能会想到这样写，

<style>.div1 {background:#065;padding:8em;}
.div1 > div {background:tan;border-radius:.8em;padding:1em;}</style>
<body>
    <div class="div1">
        <div>hhhhhhhhhhhhhhhh</div>
    </div>
</body>

是的，这样是可以实现的，但是需要两个元素，现在我们有了更简单的方法;
比如这样写：

<style>.div1 {background:tan;border-radius:8em;padding:1em;box-shadow:0 0 0 .6em #655;
    outline:6em solid #655;
}</style>
<body>
    <div class="div1">
        hhhhhhhhhhhhhhhh
    </div>
</body>

这样写的原理是，描边不会跟随元素的圆角走，因而显示直角，但是box-shadow却会，因此我们把这两者叠加到一起，box-shadow刚好填补描边和容器之间的间隙，这两者的组合达成我们想要的效果。
7、条纹背景
比如：

background: linear-gradient(#fb3,#58a); 
background: linear-gradient(#fb3 20%,#58a 80%);
background: linear-gradient(#fb3 50%,#58a 50%);

background: linear-gradient(#fb3 50%,#58a 50%);
background-size: 100% 30px;

background: linear-gradient(#fb3 50%,#58a 50%);
background-size: 100% 30px;

为了避免每次改动条纹宽度时都要修改两个数字，我们可以再次从规范那里找到捷径。
如果我们把第二个色标的位置值设置为θ，那他的位置就总会被浏览器调整为前一个色标的位置值，这个结果正是我们想要的。

background:linear-gradient(#fb3 30%,#58a
background-size:100% 30px;

如果要创建超过三种颜色的条纹，