CSS3 - Pushing the Limits - New Tools for Backgrounds and Borders

##background-clip
background-clip 对背景区域产生变化

div {
    background: rgba(0, 0, 0, 0.95);
    color: #ccc;
    border: 20px solid rgba(0, 0, 0, 0.7);
    background-clip: content-box;
    padding: 20px;
}

This is a modal box with semi-transparent borders

- content-box //内容区域
- padding-box //包含padding区域
- border-box //默认包含border

但如果你在改变了background-clip的情况下还要使用background-img的时候需要注意。

如果直接加背景图,可以看到图片的开始位置不对了。

This is a modal box with semi-transparent borders

–

这时候要引入

##background-origin

background-origin 的作用就是定位背景图片的左上角开始位置
也就相当于 background-position: right bottom, left top; 中的 top left 起始点在是哪个盒子模型的左上角。

–

This is a modal box with semi-transparent borders

现在背景图是从包含border的左上角开始的了

background-origin 值也是上面那3个

- content-box //内容区域
- padding-box //包含padding区域
- border-box //默认包含border

##Background Size

background-size 接受两个值 width height 可以 px em % 都行
如果只传入一个值，那就是width， height就是auto 这个时候是保持原图比例的
但如果两个值都有，而原图尺寸不一样，那就产生拉伸效果

除了特定宽高值，还有两个关键词

background-size: contain; 是在保持原图比例的条件下，尽可能大的显示图片

background-size: cover; 效果是 auto 100% or 100% auto，但无论选择哪个肯定会充满容器。选哪里会根据容易的尺寸自行选择

所以以上的原则就是：

要不要保持比例
要不要充满
能不能重复

##Multiple Backgrounds

语法很简单

blockquote {
    background: url(quote-open.png) top left no-repeat, url(quote-close.png) bottom right no-repeat;
}

可以引入多个背景图，并且每一个的background参数都能定制，很牛逼的说

要注意顺序前面的图再上面

强大

body {
    margin: 0;
    font-size: 62.5%;
}

div {
    width: 295px;
    height: 295px;
    border-radius: 50%;
    text-align: center;
    border: 5px solid #ccc;
    background: url(cover-left.png) 0 -1px no-repeat, url(cover-right.png) right no-repeat, url(trees1.jpg) 0 0 / cover;
    margin: 160px auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2), 0 0 150px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 1s ease;
}

p {
    margin-top: 115px;
    font: bold 0em Arial;
    padding: 10px 0;
    color: #333;
    -webkit-transition: all 0.5s ease;
}

div:hover {
    background-position: -295px -100px, 295px 100px, 0 0;
    -webkit-filter: sepia(0.8);
}

div:hover p {
    font-size: 3em;
    background: rgba(250, 250, 250, 0.5);
    -webkit-transition: all 1s ease 0.2s;
}

<body>

    <div>
        <p>Trees</p>
    </div>

</body>

用3个背景图的位置移动产生动画。都只在一个div里完成 ~~ CSS3的力量

##New Tools for Borders

border-image: url(border.png) 20 10 40 30 / 15 15 20 20 / 10 5 space;
这个用法以后再学吧。。一时半会看不懂

##Gradients

Linear Gradients

background-image: linear-gradient(black, white);
background-image: linear-gradient(to bottom right, black, white);
background-image: linear-gradient(0deg, #000 30%, #ccc 50%, #fff 70%);

线性的过渡：

3种语法：

从上到下的 black 到white
过渡方向是左上到右下，颜色是左上黑右下白过渡
过渡方向的角度变化，从开始点到容器的30%区域都是 #000， 30% -50%过渡到 #ccc， 50% -70% 是过渡到 #fff 70%之后就是 #fff

简单的radial-gradient

语法：

 /*
radial-gradient([size] [shape] at [position], [color-stops]);
*/
background-image: radial-gradient(black, white);
background-image: radial-gradient(circle at top left, black, white);
background-image: radial-gradient(closest-side circle at 200px 300px,
#000 30%, #ccc 50%, #fff 70%);
background-image: radial-gradient(30em at 200px 300px, black, white);

来个复杂过渡的小例子：

挠头吧！！！！
这里各种牛叉 https://lea.verou.me/css3patterns/

–

要注意顺序 前面的图再上面

要注意顺序前面的图再上面