css揭秘 - 背景与边框

半透明边框

RGBA/HSLA颜色
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。

border: 10px solid hsla(0,0%,100%,0.5);
background: white;
background-clip: padding-box; // 浏览器会用内边距的外沿来把背景裁切掉

多重边框

box-shadow接受第四个参数（称作“扩张半径”），通过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实现边框。

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

不过 box-shadow 的好处在于， 它支持逗号分隔语法， 我们可以创建任意数量的投影。因此， 我们可以非常轻松地在上面的示例中再加上一道 deeppink 颜色的“边框”

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

注：box-shadow是层层叠加的，第一层投影位于最顶层，以此类推，因此需要按照此规律调整扩张半径。比如说， 在前面的代码中， 我们想在外圈再加一道 5px 的外框， 那就需要指定扩张半径的值15px(10px+5px)
加投影的box-shadow

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

outline（描边）方案

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

可以通过 outline-offset 属性来控制它跟元素边缘之间的间距， 这个属性甚至可以接受负值。只适用于双层“边框”的场景（若多层边框则使用box-shadow）,边框不一定会贴合 border-radius 属性产生的圆角。

background: yellowgreen;
border: 10px solid #655;
border-radius: 10px;
outline: 1px dashed white;
outline-offset: -5px;

灵活的背景定位

background-position的扩展
允许指定背景图片距离任意角的偏移量，只要在偏移量前面指定关键字。跟右侧保持20px的偏移量同时跟底部保持10px的偏移量如下：

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

回退方案

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

background-origin方案
将background-origin设置为content-box，会使偏移量跟padding的值相同。若有不同的，可以配合background-position的扩展语法来设置额外的偏移量。

padding: 10px;
background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */
background-origin: content-box;

calc()方案
按照左上角思路来想，需要计算对左上角的偏移量，可以使用calc()计算相对于左上角的偏移量。

background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);

注：请不要忘记在calc()函数内部的 - 和 + 运算符的两侧各加一个空白符，否则会产生解析错误！

边框内圆角

难题
一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状。用两个元素可以实现此效果。

<div class="something-meaningful"><div>
    I have a nice subtle inner rounding,
    don't I look pretty?
</div></div>

.something-meaningful {
    background: #655;
    padding: .8em;
}
.something-meaningful > div {
    background: tan;
    border-radius: .8em;
    padding: 1em;
}

将box-shadow和outline结合使用，可以实现边框内圆角的效果。box-shadow的扩张半径要比描边的宽度值小，但同时又要比(根号2-1)r大(r表示border-radius)

background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;

条纹背景

横向条纹

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

垂直条纹

// to right 或者 90deg
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;

斜向条纹

background: linear-gradient(45deg,
                      #fb3 25%, #58a 0, #58a 50%,
                      #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

更好的斜向条纹

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

灵活的同色系条纹

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

复杂的背景图案

网格

background: #58a;
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: 50px 50px, 50px 50px,
                 10px 10px, 10px 10px;

波点

background: #655;
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代码 -- SCSS

@mixin polka($size, $dot, $base, $accent) { 
    background: $base;
    background-image:
    radial-gradient($accent $dot, transparent 0),
    radial-gradient($accent $dot, transparent 0);
    background-size: $size $size;
    background-position: 0 0, $size/2 $size/2;
}

// 调用
@include polka(30px, 30%, #655, tan);

棋盘

background: #eee;
background-image:
    linear-gradient(45deg,
        rgba(0,0,0,.25) 25%, transparent 0,
        transparent 75%, rgba(0,0,0,.25) 0),
    linear-gradient(45deg,
        rgba(0,0,0,.25) 25%, transparent 0,
        transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

棋盘的mixin代码 -- scss

@mixin checkerboard($size, $base,
            $accent: rgba(0,0,0,.25)) {
    background: $base;
    background-image:
        linear-gradient(45deg,
            $accent 25%, transparent 0,
            transparent 75%, $accent 0),
        linear-gradient(45deg,
            $accent 25%, transparent 0,
            transparent 75%, $accent 0);
    background-position: 0 0, $size $size,
    background-size: 2*$size 2*$size;
}
/* 调用时是这样的…… */
@include checkerboard(15px, #58a, tan);

棋盘的svg实现代码

<svg xmlns="http://www.w3.org/2000/svg"
    width="100" height="100" fill-opacity=".25" >
    <rect x="50" width="50" height="50" />
    <rect y="50" width="50" height="50" />
</svg>
<!-- 调用 -->
background: #eee url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" \
            width="100" height="100" \
            fill-opacity=".25">\
            <rect x="50" width="50" height="50" /> \
            <rect y="50" width="50" height="50" /> \
            </svg>');
background-size: 30px 30px;

请注意，如果你出于可读性的考虑，需要把一句CSS代码打断为多行，只需要用反斜杠（\）来转义每行末尾的换行就可以了。

伪随机背景

解决方案

background: hsl(20, 40%, 90%);
background-image: 
    linear-gradient(90deg, #fb3 11px, transparent 0),
    linear-gradient(90deg, #ab4 23px, transparent 0),
    linear-gradient(90deg, #655 23px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;

使用质数来指定各组条纹的宽度，增加各组条纹宽度的随机真实性。相对质数是一种数字之间的关系， 而不是单个数字自身的属性。 构成相对质数的这些数字没有公约数， 但它们自己是可以有多个约数的（ 比如说， 10 和 27 是相对质数， 但它们都不是质数）。 很显然， 一个质数跟其他所有数字都可以构成相对质数。

连续的图像边框

border-image的工作原理
基本上就是九宫格伸缩法： 把图片切割成九块， 然后把它们应用到元素边框相应的边和角。
解决方案

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

合并简写为：

padding: 1em;
border: 1em solid transparent;
background:
    linear-gradient(white, white) padding-box,
    url(stone-art.jpg) border-box 0 / cover;

也适用于渐变图案，下面的可以实现一种老式信封样式的边框。

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

也可以使用border-image来实现。

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

不过 border-image 方法存在一些问题。

• 每当我们改变 border-image-slice时，都需要同时修改borderwidth来让它们相互匹配。
• 由于我们不能在 border-image-slice 属性中使用 em 单位， 只能把边框厚度指定为像素单位。
• 条纹的宽度需要在色标的位置信息中写好，因此我们在改变条纹宽度时， 需要修改四处。
  
  蚂蚁行军效果

@keyframes ants { to { background-position: 100% } }
.marching-ants {
    padding: 1em;
    border: 1px solid transparent;
    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);
padding-top: 1em;