css揭秘笔记——背景与边框

背景与边框

半透明边框

知识点

background-clip: [border-box] |[padding-box] | [content-box];

hsla(<色相>, <饱和度>, <明度>, <透明度>)
色相：0~360
饱和度：0%~1000% (0的时候也要加%！！！不然会出错)
明度： 0%（黑色）~100%（白色）
透明度：0~1

#### 难题：
正常情况下，想要达到半透明边框的效果，使用

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

这种方式不行，因为背景色延伸到border下面，半透明的边框反映的还是背景色。

#### 解决方案：

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

这样就使背景只延伸到padding边沿。
半透明边框效果图

多重边框

知识点

box-shadow:none|| inset && [<x-offset> <y-offset> <blur-radius> <spread-radius> <color>];

outline: <width> <style> <color>;

outline-offset

#### 解决方案1

border-radius:20px;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            5px 5px 10px 15px rgba(0,0,0,.5);
background:yellowgreen;

效果如下图：

注意：

1. 投影不占据空间，会和相邻元素叠加，也不会影响box-sizing属性；
2. 贴合圆角，设置可border-radius，会自动变成相应圆角；
3. 不会响应鼠标事件，除非使用inset关键字，使投影绘制在边框内。

解决方案2

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

这种加描边的方法只能绘制出两层边框的效果。
另外，添加outline-offset还有另外的效果：

border-radius:10px;
outline:2px dashed white;
outline-offset:-15px;
background:black;

注意：

1. 描边也不占据空间；
2. outline不能接受逗号分隔的多个值；
3. 描边不能贴合圆角；
4. 不同浏览器效果可能不一样。

灵活的背景定位

知识点

background-position扩展语法
background-origin：padding-box(默认值)|content-box|border-box
(背景图片的区域)

#### background-clip、background-origin和background-position的区别

这三个属性都和背景的位置有关，但是是有区别的。
首先，background-clip是针对背景颜色和图片的；而background-origin和background-position仅指背景图片。
background-clip 设置元素的背景是否延伸到边框下面。值为border-box（默认值）、padding-box和content-box。
background-origin指定背景图片的原点位置。值为border-box、padding-box（默认值）、content-box。

border: 1.5em solid transparent; 
background: url(./image/1001-1.jpg);
background-size: cover;
background-clip: border-box;
background-origin: padding-box; /*这是默认值*/  

背景图片延伸到边框，但是图片的起始位置是从padding开始的。

将background-origin改为border-box：

这时，背景延时到边框下，并且图片的起始位置是border。

另外，background-position是在background-origin设置的图片起始位置的基础上的偏移量。

background-origin: border-box;
background-position:50px 50px;

background-origin: padding-box;
background-position:50px 50px;

偏移差别很明显吧~

问题1

是背景图片定位在右下角，据底部和右边20px，且容器大小不固定.

解决方案1

一种方法是：

background:url(./image/heart.png) no-repeat deepskyblue;
background-position: right 20px bottom 20px;

在偏移量前面指定关键字。
另一种方法是：

background:url(./image/heart.png) no-repeat deepskyblue;
background-position: calc(100%-20px) calc(100%-20px);

效果如下：

问题2

背景图片在padding内侧，若按方案1的方法，padding改变，background-position的值也得改，这样就不是很好了。

解决方案2

padding: 20px; 
background: url(./image/heart.png) no-repeat deepskyblue bottom right;/*或 100% 100%*/
background-origin: content-box;

### 边框内圆角
不使用两个嵌套的div，要实现这样的效果：

background: tan; 
border-radius:.8em; 
box-shadow:0 0 0 .4em #655; 
outline: .7em solid #655;

注意大小宽度：(√2 -1)*border-radius < 扩张半径 < outline-width

条纹背景

渐变背景

background:linear-gradient(goldenrod,steelblue);/*相当于goldenrod 0%,steelblue 100%*/

background: linear-gradient(goldenrod 20%,steelblue 80%)

条纹背景

background: linear-gradient(goldenrod 50%,steelblue 0); /相当于goldenrod 50%,steelblue 50%*/

background: linear-gradient(goldenrod 50%,steelblue 0); 
background-size:100% 30px;

background: linear-gradient(goldenrod 30%,steelblue 0); 
background-size:100% 30px;

background: linear-gradient(goldenrod 33.33%, steelblue 0, steelblue 66.66%, yellowgreen 0); 
background-size:100% 45px;

background: linear-gradient(to right, goldenrod 50%,steelblue 50%); 
background-size:30px 100%;

background: linear-gradient(45deg, goldenrod 50%,steelblue 50%); 
background-size:30px 30px;

background: linear-gradient(45deg, goldenrod 25%,steelblue 0, steelblue 50%,goldenrod 0, goldenrod 75%,steelblue 0); 
background-size:30px 30px;

/*上个由于切片是30*30的，所以条纹的宽度是小于15px的，要想使条纹宽度是15，就得勾股定理计算了，这里42取了约数*/
background: linear-gradient(45deg, goldenrod 25%,steelblue 0, steelblue 50%,goldenrod 0, goldenrod 75%,steelblue 0); 
background-size:42px 42px;

敲黑板，划重点！！！
linear-gradient() 和 radial-gradient() 各有一个循环式的加强版： repeating-linear-gradient() 和 repeating-radical-gradient()

background: repeating-linear-gradient(45deg, goldenrod,steelblue 30px);

background: repeating-linear-gradient(45deg, goldenrod, goldenrod 15px,steelblue 0, steelblue 30px);
/*斜45度宽15px的斜条纹*/

/*不需要计算，斜任何度数的条纹实现*/
background: repeating-linear-gradient(60deg, goldenrod, goldenrod 15px,steelblue 0, steelblue 30px);

书上说，最好用前面那种方式（贴片+百分比）实现水平垂直的条纹，用repeat的方式实现斜条纹；45度的斜条纹两者结合的方式。

灵活的同色系条纹

代码一：

background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);

代码二：

background: #58a; 
background-image: repeating-linear-gradient(30deg, hsla(0, 80%, 90%, .2), hsla(0, 80%, 90%, .2) 15px, transparent 0, transparent 30px);

以上两段代码实现了同一个效果：

第二段代码的好处：

1. 更加DRY，只修改一处就可以改变所有颜色；
2. 体现了两个条纹色的关系；
3. 背景色起到了回退作用。

复杂的背景图案

网格

background: white; 
background-image: 
    linear-gradient(rgba(200,0,0,.5) 50%, transparent 0), 
    linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0); 
background-size: 30px 30px;

background: cornflowerblue; 
background-image: 
    linear-gradient(white 1px, transparent 0), 
    linear-gradient(90deg, white 1px, transparent 0); 
background-size: 30px 30px;

background: cornflowerblue; 
background-image: 
    linear-gradient(white 2px, transparent 0), 
    linear-gradient(90deg, white 2px, transparent 0), 
    linear-gradient(hsla(0,0%,100%, .3) 1px, transparent 0), 
    linear-gradient(90deg, hsla(0,0%,100%, .3) 1px, transparent 0); 
background-size: 75px 75px, 
                 75px 75px,
                 15px 15px,
                 15px 15px;
                 

波点

background: saddlebrown; 
background-image: radial-gradient(tan 20%, transparent 0); 
background-size: 30px 30px;

background: saddlebrown; 
background-image: 
    radial-gradient(tan 20%, transparent 0),
    radial-gradient(tan 20%, transparent 0); 
background-size: 30px 30px; 
background-position:0 0, 15px 15px;

提示：可以使用预处理器的mixin来简化代码。

棋盘

step1

background: lightgray; 
background-image: 
    linear-gradient(45deg, darkgray 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, darkgray 0); 
background-size: 30px 30px;

代码还可以简化为：

background: lightgray; 
background-image: 
    linear-gradient(45deg, darkgray 25%, transparent 0, transparent 75%, darkgray 0); 
background-size: 30px 30px;

step2

background: lightgray; 
background-image: 
    linear-gradient(45deg, darkgray 25%, transparent 0, transparent 75%, darkgray 0),
    linear-gradient(45deg, darkred 25%, transparent 0, transparent 75%, darkred 0); 
background-size: 30px 30px;
background-position:0 0,15px 15px;

颜色统一之后，就是棋盘了

当然，使用预处理器的mixin来进一步简化代码就更好了。
当然，使用svg代码更简洁。

伪随机背景

background: beige; 
background-image: 
    linear-gradient(90deg, orange 11px, transparent 0), 
    linear-gradient(90deg, yellowgreen 23px, transparent 0), 
    linear-gradient(90deg, sienna 41px, transparent 0); 
background-size: 41px 100%, 61px 100%, 83px 100%;

四种颜色的条纹实现的随机条纹背景，注意点

1. 以一种颜色当做背景，另外三种当做条纹。
2. 以不同尺寸的渐变贴片叠加。
3. 切片以不同间距重复数次之后统一对齐的地方是这些间距的最小公倍数，而质数之间的最小公倍数是它们的乘积，这样也是最大的，所以间距应该用质数。

连续的图像边框

图像边框，可以使用border-image属性，但是它的九宫格伸缩法的原理导致了这种边框不能成为连续的图像。

可以使用背景图片加前置的纯色背景来实现。

padding: 1em; 
border:1.5em solid transparent; 
background:
    linear-gradient(white, white), 
    url(./image/1001-1.jpg);
background-clip:padding-box, border-box;
background-size: cover;
background-origin: border-box;

更改元素宽高，边框依然是连续的。

老式信封

border: 1em solid transparent;
padding: 1em;
background: 
    linear-gradient(white, white), 
    repeating-linear-gradient(-45deg, red 0, red 15px,transparent 0, transparent 30px, blue 0, blue 45px, transparent 0, transparent 60px);
background-clip: padding-box, border-box;
background-origin: border-box;

代码可简化为：

border: 1em solid transparent;
padding: 1em;
background:
    linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, red 0, red 12.5%,transparent 0, transparent 25%, blue 0, blue 37.5%, transparent 0, transparent 50%) 0/ 5em 5em;

这样，通过background-size就可以改变条纹的宽度，通过border改变边框的宽度。
注意：0/5em 5em 表示background-position和background-size，在background中一旦出现background-size，前面就必须是background-position，且用/分开。

还可以用border-image来实现：

border: 1em solid transparent;
padding: 1em;
border-image:
16 repeating-linear-gradient(-45deg, red 0, red 1em,transparent 0, transparent 2em, blue 0, blue 3em, transparent 0, transparent 4em);

但是这样尺寸有变，修改的地方就会很多。

蚂蚁行军
（假装图片是动态的）

@keyframes ants { to {background-position: 100%} }

  .marching-ants{
    border: 1px solid transparent;
    padding: 1em;
    background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/.6em .6em;
    animation: ants 12s linear infinite;
  }

脚注

border-top: .2em solid transparent;
border-image:100% 0 0  linear-gradient(90deg, currentColor 4em, transparent 0);

[1]: /img/bVXHvz